Question

我正在比较div中的两个值设置bij数据属性（res和ref），并根据我想要设置div的bgcolor。不知怎的，它不起作用。结果没有设置bgcolor。

HTML

<div id="grid">
  <div class="item blue" data-kpi="one" data-res="8" data-ref="4" ></div>
  <div class="item yellow" data-kpi="two" data-res="4" data-ref="7" data-groups='["all", "numbers", "green", "square"]'>  </div> 
  <div class="item blue" data-kpi="three" data-res="8" data-ref="13"></div>
</div>

的jQuery

$('#grid div.item[data-res][data-ref]').each(function(index){
    var res = $(this).data('res');
    var ref = $(this).data('ref');

   if(res > ref)
   {
    $(this).css('background-color', 'red');
   }  
  else if(ref > res)
   {
   $(this).css('background-color', 'green');
   }
  else 
   { 
   $(this).css('background-color', 'black');  
   }

});

Answer 1

在比较之前，您需要使用parseInt()将值解析为int。

var res = parseInt($(this).data('res'));
var ref = parseInt($(this).data('ref'));

Answer 2

你需要在div中放入一些数据，然后你才能获得结果。

<强> HTML

  <div id="grid">
     <div class="item blue" data-kpi="one" data-res="8" data-ref="4" >Hai</div>
     <div class="item yellow" data-kpi="two" data-res="4" data-ref="7" data-groups='["all",  "numbers", "green", "square"]'>All</div> 
     <div class="item blue" data-kpi="three" data-res="8" data-ref="13">the Best</div>
 </div>

<强>的jQuery

  $('#grid div.item[data-res][data-ref]').each(function(index) {
          var res = parseInt($(this).data('res'));
          var ref = parseInt$(this).data('ref'));

      if(res > ref) {
           $(this).css('background-color', 'red');
       } 
      else if(ref > res) {
           $(this).css('background-color', 'green');
      }
      else  { 
          $(this).css('background-color', 'black');  
      }

   })

现在你检查一下。

比较设置div的bgcolor的值

2 个答案: