javascript - 基于值的jquery字体颜色脚本包含

Question

我有一个简单的 if else 语句，它将根据它的值为数字着色。

谁能解释为什么下面总是导致红色？

$(document).ready(function() {

    // the following will select all elements with class "deltadiff"
    // if the element has a '-', it will assign a 'red' class, else it will assign the 'green class'

    if ($(".deltadiff:contains('-')"))
      $(".deltadiff").addClass('red');
    else $(".deltadiff").addClass('green');
  }

)

.red {
  color: red;
}

.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> -120</font>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> 120</font>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> 5</font>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> -7</font>

标签： javascriptjquery

Answer 1

if ($(".deltadiff:contains('-')"))仅检查具有deltadiff类名的第一个元素。

您应该遍历具有相同类的所有元素。

然后，用于includes()检查 是否innerHTML包含-.

$(document).ready(function() {

    // For each element with class: 'deltadiff'
    $('.deltadiff').each(function(i, obj) {
      
        // if the element has a '-', it will assign a 'red' class, else it will assign the 'green class'
        if (obj.innerHTML.includes('-')) {
            obj.classList.add("red");
        } else {
            obj.classList.add("green");
        }
    });
});

.red {
  color: red;
}

.green {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> -120</font>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> 120</font>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> 5</font>

<font class="deltadiff" style="font-size:10px; vertical-align:super;"> -7</font>