Question

我知道这个问题似乎是重复的，但我已经遇到了很多类似的问题并且没有成功。

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

这是我目前的jQuery。当我在浏览器中调试时，整个函数被跳过。然而由于某种原因，我的课程都被改为文本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) { - 但是只选择了带有class .balance的FIRST元素。

这是我的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来选择当前元素。

＆＃13;

$('.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");
  }
});

＆＃13;

.text-succ {
  color: green;
}
.text-dang {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

您需要在引用元素中应用和删除类，在这种情况下 $（this）而不是 $（＆＃39; .balance＆＃39;）

选中 fiddle

$('.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");   
});

Answer 3

记住你循环遍历所有元素......当$（＆＃39; .balance＆＃39;）。每个循环调用匿名函数并使用$（this）来引用$（＆＃34;。 balance＆＃34;）元素，它是迭代的对象......

$('.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);
});

嗯，这只是一个想法...

Javascript / jQuery - 根据数值

3 个答案: