根據div值更改CSS值

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等於< 4 。 但是我認為您的代碼無法正常工作的原因是因為您將所有.a更改為最后處理的元素所指定的顏色：

 $('.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'); } }); 

 body { background-color: green; } 

 <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>