動的にCSSをJavascriptまたはjQueryで変更する

Question

私は、0より大きい値に基づいてCSSを動的に変更したいコードスニペットを持っています。 '0'の値の場合、class = 'cart-summary__count' 。 '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> 

変化に：私はまだのJsを学んでいますし、任意の助けをいただければ幸いです

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

。カートの値は、アイテムを追加するときにページ上で変更することができます。

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

は新を参照してください。 0

Answer 2

あなたが探しているのはあなただと思います。idは一意でなければならないので、あなたのコードでidを削除しました。そして、すべてのspansのクラスカート概要を追加しました。必要なクラス。

$('#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>