Question

我遇到另一个问题，试图在slaClass td中显示不同的SLA状态。

我以前使用console.log("red")等来显示测试状态。这很好用，但是当尝试为slaClass字段设置文本时，它仅显示Warning而不是正确的值。

$(document).ready(function() {
  var daysLeft = $('.DaysLeft');
  var sla = $('.slaClass');
  $(daysLeft).each(function() {
    var daysLeft = $(this).text(); // assign a current value to increase its performance.

    if (daysLeft != "" && daysLeft != undefined) {
      if (parseInt(daysLeft) <= 30) {
        console.log('Red');
        $(sla).text('Red');
      } else if (parseInt(daysLeft) > 30 && parseInt(daysLeft) < 90) {
        console.log('Warning');
        $(sla).text('Warning');
      } else if (parseInt(daysLeft) >= 90) {
        console.log('Green');
        $(sla).text('Green');
      }
    } else(alert("Error"));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <th>Applicants</th>
      <th>Interviews</th>
      <th>Offers</th>
      <th>Days Left to Fill </th>
      <th>SLA</th>
    </tr>
    <tr>
      <td>530</td>
      <td>50</td>
      <td>1</td>
      <td class="DaysLeft">125</td>
      <td class="slaClass"></td>
    </tr>
    <tr>
      <td>56</td>
      <td>0</td>
      <td>0</td>
      <td class="DaysLeft">25</td>
      <td class="slaClass"></td>
    </tr>
    <tr>
      <td>82</td>
      <td>6</td>
      <td>0</td>
      <td class="DaysLeft">62</td>
      <td class="slaClass"></td>
    </tr>
  </tbody>
</table>

演示代码-http://jsfiddle.net/ZmesE/294/

Answer 1

问题是您没有从当前的“ .daysLeft”元素中获取兄弟的“ .slaClass”元素。

尝试一下：

        $(document).ready(function(){
               var daysLeft = $('.DaysLeft');

                $(daysLeft).each(function() {
                    var daysLeft=$(this).text(); // assign a current value to increase its performance.
        var sla = $(this).siblings('.slaClass');
                    if(daysLeft !="" && daysLeft!=undefined)
                    {
                       if (parseInt(daysLeft) <= 30) {
                           console.log('Red');
                           $(sla).text('Red');
                        }else if (parseInt(daysLeft) > 30 && parseInt(daysLeft) < 90) {
                           console.log('Warning');
                           $(sla).text('Warning');
                        }else if (parseInt(daysLeft) >= 90) {
                           console.log('Green');
                           $(sla).text('Green');
                        }
                   }
                   else(alert("Error"));
                })
        });

Answer 2

问题是因为您要更新.as-console-wrapper { max-height: 100% !important; top: 0; }元素的 all 而不是.slaClass迭代中与当前.DaysLeft元素相关的元素。要解决此问题，请使用each获取当前元素的父级closest()。试试这个：

tr

$(document).ready(function() {
  $('.DaysLeft').each(function() {
    var $sla = $(this).closest('tr').find('.slaClass');
    var daysLeft = $(this).text();

    if (daysLeft != "" && daysLeft != undefined) {
      if (parseInt(daysLeft) <= 30) {
        console.log('Red');
        $sla.text('Red');
      } else if (parseInt(daysLeft) > 30 && parseInt(daysLeft) < 90) {
        console.log('Warning');
        $sla.text('Warning');
      } else if (parseInt(daysLeft) >= 90) {
        console.log('Green');
        $sla.text('Green');
      }
    } else(alert("Error"));
  })
});

还要注意，在您的原始逻辑中，<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <table> <tbody> <tr> <th>Applicants</th> <th>Interviews</th> <th>Offers</th> <th>Days Left to Fill </th> <th>SLA</th> </tr> <tr> <td>530</td> <td>50</td> <td>1</td> <td class="DaysLeft">125</td> <td class="slaClass"></td> </tr> <tr> <td>56</td> <td>0</td> <td>0</td> <td class="DaysLeft">25</td> <td class="slaClass"></td> </tr> <tr> <td>82</td> <td>6</td> <td>0</td> <td class="DaysLeft">62</td> <td class="slaClass"></td> </tr> </tbody> </table>和DaysLeft已经是jQuery对象，因此您无需再次将它们放入jQuery对象。

即使变量范围不同，重用相同的变量名也不是一个好主意。这很容易导致一些不必要的混乱。

jQuery使用Array和if / else if根据其他单元格的值设置td单元格的值

2 个答案: