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

Question

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

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

这是我当前的 jQuery。当我在浏览器中调试时，整个函数都会被跳过。但由于某种原因，我的类(class)全部改为 text-dang。

$('.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 还很陌生，所以如果您需要更多信息，请告诉我。如有任何帮助，我们将不胜感激!

Answer 1

问题是您要在每次迭代中更新所有元素。您需要使用 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>