Javascript/jQuery - 基於數值刪除/添加多個元素的類

我知道這個問題看起來像是重複，但我已經瀏覽了很多類似的問題，但都沒有成功。Javascript/jQuery - 基於數值刪除/添加多個元素的類

我正在與一位財務記者合作，並希望將負餘額紅和正餘額平衡爲綠色。

這是我目前的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。（請注意，我用的剃刀，並通過將所有包含此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，請讓我知道你是否需要更多信息。任何幫助表示讚賞！

來源

2016-02-18 Abigail

'$（本）.removeClass（「TEXT-SUCC」）addClass（「文本宕」）;' –

是你。將'removeClass'和'addClass'應用到'.balance'。你想在當前項目上做到這一點。 @PranavCBalan評論是要走的路。 – Gpx

您需要申請並刪除類的簡稱元素，在這種情況下$（本）的代替$（ '平衡'）。

入住這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"); 
});

來源

2016-02-18 17:10:48 Vixed

謝謝！我都喜歡並且討厭大多數解決方案到底有多簡單。 – Abigail

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

來源

2016-02-18 17:09:29 Kevin

記住你通過所有元素循環......當$（「平衡」）。每個循環調用匿名函數，並使用$（這）是指的$（「平衡」）元件，其迭代的對象...

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

好只是一個想法...

來源

2016-02-18 19:25:09

Javascript/jQuery - 基於數值刪除/添加多個元素的類

回答

相關問題