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>

Answer 1

if ($(".deltadiff:contains('-')"))僅檢查以deltadiff作為類名的第一個元素。

您應該遍歷所有具有相同 class 的元素。

然后，使用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>