Question

尝试让这个javascript读取div“flow-hold”的值，并根据值更改背景颜色。

我有一个名为flow hold的div，例如值为132，我希望看到绿色，因为它小于200阈值。如果该值超过阈值，我希望它是红色的。

<div class="flow-hold">132</div>
<script type="text/javascript">
 $('.flow-hold'), function(){
   if($(this).val()>=200){

       $('.flow-hold').css({"background-color":"red"});
   } else {
       $('.flow-hold').css({"background-color":"green"});

   }
});
</script>

Answer 1

如果你想在页面加载时这样做，你可以使用你的后端技术根据阈值分配一个具有所需颜色的CSS类。

例如，在PHP中它将是：

<div class="flow-hold <?=($threshold>=200)?'bg-red':'bg-green'?>">132</div>

在CSS文件中：

bg-red{
background-color: red;
}
bg-green:{
background-color: green;
}

但是，如果您想在客户端执行此操作，则必须为其分配一个确切的操作，例如：

<div class="flow-hold">132</div>
<script type="text/javascript">
 $('.flow-hold').on('hover', function(){
   if($(this).val()>=200){

       $('.flow-hold').css({"background-color":"red"});
   } else {
       $('.flow-hold').css({"background-color":"green"});

   }
});
</script>

Answer 2

实际上你的问题是你正在使用的访问者。检查如果您使用JQuery并按类获取项目，您将获得array，其中包含所有包含class的div。

所以在这里你有一个你想要实现的目标的实例，考虑到我之前所说的。

注意：您的代码不会自行运行，下次请修复它。 注2：请注意，我没有做很多更改，但它开始有效。

＆＃13;

function changeBackground() {
  let div = $('.flow-hold')[0];
  if (div.innerText >= 200) {
    $('.flow-hold').css({
      "background-color": "red"
    });
  } else {
    $('.flow-hold').css({
      "background-color": "green"
    });
  }

}

changeBackground();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flow-hold">132</div>

＆＃13;

Answer 3

我相信您打算使用.each( function ) jQuery方法，其中该函数一次只能处理一个元素，因此它不应该再次查找$('.flow-hold')，因为可以有更多比那个班级的一个元素。

您还应该使用.text()方法，而不是.val()方法。

$('.flow-hold').each(function() {
    if ($(this).text() >= 200) {
        $(this).css({"background-color":"red"});
    } else {
        $(this).css({"background-color":"green"});
    }
});

由于您在两种情况下都设置了相同的属性，因此您还可以使用.css( propertyName, function )方法的隐式循环：

$('.flow-hold').css("background-color", function() {
    return ($(this).text() >= 200 ? "red" : "green");
});

Answer 4

您可以使用以下脚本：

$(document).ready(function(){
  var value = parseInt($('.flow-hold').html());

  if(value >= 200){
     $('.flow-hold').css("background-color","red");
  }
  else {
     $('.flow-hold').css("background-color","green");
  }
});

Answer 5

尝试这个简单易行：

$('.flow-hold').each(function() {
   if (parseInt($(this).text()) >= 200) {
      $(this).css("background-color","red");
    } else {
         $(this).css("background-color","green");
    }
});

根据div的值更改div的背景

5 个答案: