Question

我试图根据从php数据库查询中提取的div的值来更改css网格中单元格的背景。我使用jquery与另一个div实现相同的功能，但是唯一的区别是被比较的值是css中的相同div。这是html的div结构。 box datetime是box a的孩子。

<div class='box a'>
<div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div>
<div class='box mm'>75.49</div>
<div class='sog'>10.2</div>
<div class='box datetime'>1</div>

这是我正在使用的功能。

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);
  if (value < 4)
     $('.a').css('background-color', '#fff');
     else if (value >= 4 && value <= 15)
     $('.a').css('background-color', 'orange');
     else
     $('.a').css('background-color', 'purple');   

});

.datetime是一个整数，代表2次分钟数。
.a是我要更改css属性的css网格单元格。

现在，它只会将所有.a背景颜色变为#fff。它无法正确评估。我做错了什么？

Answer 1

试试这个：

  var value = Number($('.datetime').text());
  //console.log(value);
  if (value < 4)
     $(".a", '.datetime').css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $(".a", '.datetime').css('background-color', 'orange');
  else
     $(".a", '.datetime').css('background-color', 'purple');

..如果您有一个团体，则不需要每个

Answer 2

您在所有.a元素上设置样式。循环中的最后一个值确定所有.a元素的值。要为每个.datetime单独设置它们，请获取每个.a的父（.datetime）元素：

$('.datetime').each(function(index, value) {

  var value = Number($(this).text());
  console.log(value);

  var $elem = $(this).parent();

  if (value < 4)
     $elem.css('background-color', '#fff');
  else if (value >= 4 && value <= 15)
     $elem.css('background-color', 'orange');
  else
     $elem.css('background-color', 'purple');   

});

Answer 3

您正在从.each传递值，但会覆盖下一行的值。此外，您还不需要检查该值是否为<= 4，因为您已经排除该值不是< 4。但我认为您的代码无法正常工作的原因是因为您要将所有.a更改为最后处理的元素所指示的颜色：

＆＃13;

$('.datetime').each(function(index, value) {

  var textValue = parseInt($(value).text());
  
  if (textValue < 4) {
    $(value).parent(".a").css('background-color', '#fff');
  } else if (textValue <= 15) {
    $(value).parent(".a").css('background-color', 'orange');
  } else {
    $(value).parent(".a").css('background-color', 'purple');
  }
});

＆＃13;

body {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>3</div>
</div>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>12</div>
</div>

<div class='box a'>
  <div class='box name'><a style='text-decoration:none; color:#444;' href='foobar.com' target='_blank'>Proper Name</a></div>
  <div class='box mm'>75.49</div>
  <div class='sog'>10.2</div>
  <div class='box datetime'>18</div>
</div>

＆＃13;

根据div值更改CSS值

3 个答案: