動態改變CSS的Javascript或jQuery的

Question

我的代碼片段，其中我想改變動態地基於大於0。對於「0」類=「推車summary__count」的值的值的CSS 。對於大於'0'的值class ='cart-summary__count_full'。

<span class="cart-summary__count" data-v-observable="cart-count">0</span> 

<span class="cart-summary__count" data-v-observable="cart-count">1</span> 

*編輯：

<div id="cart-summary"> 
    <span class="cart-summary__count" data-v-observable="cart-count">0</span> 
    <a href class="cart">example.com</a> 
</div> 

變化：

<a href class="cart-full">example.com</a> 

我仍然在學習JS和任何幫助將不勝感激。添加一個項目時，購物車的值可以更改頁面上。

Answer 1

請使用此代碼

$(document).ready(function() { 
    $("span").each(function(){ 
    if (parseInt($(this).text()) > 0){ 
     $(this).removeClass("cart-summary__count"); 
     $(this).addClass("cart-summary__count_full"); 
    } 
    }); 
}); 

請參閱本Fiddle

編輯

根據您的編輯，使用下面的代碼。

HTML

<div id="cart-summary"> 
    <div class="cartContainer"> 
    <span class="cart-summary__count" data-v-observable="cart-count">0</span> 
    <a href class="cart">example.com</a> 
    </div> 
    <div class="cartContainer"> 
    <span class="cart-summary__count" data-v-observable="cart-count">1</span> 
    <a href class="cart">example1.com</a> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $("span").each(function(){ 
    if (parseInt($(this).text()) > 0){ 
      $(this).parent().find('a').removeClass("cart"); 
      $(this).parent().find('a').addClass("cart-full"); 
    } 
    }); 
}); 

CSS

.cart-full { 
    border : 2px solid red 
} 

.cartContainer { 
    padding-top : 5px; 
} 

介紹新Fiddle

Answer 2

希望這是你在找什麼for.I在代碼中已刪除ID爲ID應該是唯一的，我添加了一個類車，彙總所有spans.Once運行下面的代碼，將追加所需的課程。

$('#cart .cart-summary').each(function(){ 
 
    
 
    var span_value = parseInt($(this).text()); 
 
if(span_value == 0){ 
 
    $(this).addClass('cart-summary__count'); 
 
    } 
 
    else{ 
 
$(this).addClass('cart-summary__count_full'); 
 
} 
 
    
 
    })

.cart-summary__count{ 
 
    color:green; 
 
    } 
 
.cart-summary__count_full{ 
 
    color:red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cart"> 
 
<span class="cart-summary" data-v-observable="cart-count">0</span> 
 

 
<span class="cart-summary" data-v-observable="cart-count">1</span> 
 
<span class="cart-summary" data-v-observable="cart-count">1</span> 
 
<span class="cart-summary" data-v-observable="cart-count">1</span> 
 
<span class="cart-summary" data-v-observable="cart-count">1</span> 
 
</div>