Javascript/jQuery - 根据数值删除/添加多个元素的类

Javascript/jQuery - remove/add class for multiple elements based on numeric value

本文关键字：添加 删除 元素 jQuery Javascript      更新时间：2023-09-26

我知道这个问题似乎是重复的，但我涉足了许多类似的问题，但没有成功。

我正在与一位财经记者合作，希望将负余额设为红色，正余额设为绿色。

这是我当前的jQuery。当我在浏览器中调试时，整个函数被跳过。然而，出于某种原因，我的课程都被改成了文本当。

$('.balance').each(function (i) {
    var content = $(this).text().replace('$', '');
    var balance = parseInt(content, 10);
    if (balance <= 0)
    {
        $('.balance').removeClass("text-succ").addClass("text-dang");
    }
    else {
        $('.balance').removeClass("text-dang").addClass("text-succ");
    }
});

我也尝试过没有包装函数 - $('.balance').each(function (i) { - 但后来只选择了类 .balance 的第一个元素。

这是我的 HTML。（请注意，我正在使用 Razor，并遍历多个帐户，这些帐户都将包含此 h2。在我使用包装功能之前，天平一直很好。

<h2>
 <strong>@account.Name</strong> 
 <i class="fa fa-angle-right"></i> 
 Balance: <span class="balance text-succ">$ @account.Balance</span>
</h2>

我对Javascript和StackOverflow很陌生，所以如果您需要更多信息，请告诉我。任何帮助不胜感激！

问题是你在每次迭代时都会更新所有元素。 您需要使用 this 来选择当前元素。

$('.balance').each(function(i) {
  var $this = $(this);
  var content = $this.text().replace('$', '');
  var balance = parseInt(content, 10);
  if (balance <= 0) {
    $this.removeClass("text-succ").addClass("text-dang");
  } else {
    $this.removeClass("text-dang").addClass("text-succ");
  }
});
.text-succ {
  color: green;
}
.text-dang {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<h2><strong>Account1</strong> <i class="fa fa-angle-right"></i> Balance: <span class="balance text-succ">-4</span></h2>
<h2><strong>Account2</strong> <i class="fa fa-angle-right"></i> Balance: <span class="balance">-2</span></h2>
<h2><strong>Account3</strong> <i class="fa fa-angle-right"></i> Balance: <span class="balance">0</span></h2>
<h2><strong>Account4</strong> <i class="fa fa-angle-right"></i> Balance: <span class="balance">2</span></h2>
<h2><strong>Account5</strong> <i class="fa fa-angle-right"></i> Balance: <span class="balance">4</span></h2>

您需要将类应用于并删除引用的元素，在本例中为 $（this） 而不是 $（'.balance'）。

检查这个小提琴

$('.balance').each(function(){
    var balance = parseInt($(this).text().replace('$',''), 10);
    $(this).removeClass("text-dang").addClass("text-succ");
    if (balance <= 0)
        $(this).removeClass("text-succ").addClass("text-dang");   
});
请记住，

您正在循环访问所有元素...当 $（'.balance'）.each 循环调用匿名函数并使用 $（this） 来引用作为迭代对象的 $（".balance"） 元素时...

$('.balance').each(function (i) {
var content = $(this).text().replace('$', '');
var balance = parseInt(content, 10);
if (balance <= 0)
{
    $(this).removeClass("text-succ").addClass("text-dang");
}
else {
    $(this).removeClass("text-dang").addClass("text-succ");
}});

有一个toogleClass可以接受两个参数，一个是类的字符串，第二个是逻辑测试......所以你可以做这样的事情：

$('.balance').each(function (i) {
var content = $(this).text().replace('$', '');
var balance = parseInt(content, 10);
//to be on the safe side:
$(this).removeClass();// or $(this).removeClass("text-dang text-succ");
$(this).toggleClass("text-dang", balance <= 0);    
$(this).toggleClass("text-succ", balance > 0);
});

好吧只是一个想法...

相关文章：