CSS dynamisch ändern mit Javascript oder jQuery

Question

Ich habe ein Codeschnipsel, in dem ich die css dynamisch basierend auf den Werten größer als 0 ändern möchte. Für einen Wert von '0' die Klasse = 'cart-summary__count' . Für einen Wert größer als '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> 

* edit:

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

Änderung:

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

ich noch Js lerne und jede mögliche Hilfe würde sehr geschätzt werden. Der Warenkorbwert kann sich beim Hinzufügen eines Artikels auf der Seite ändern.

Answer 1

Bitte verwenden Sie diesen Code

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

Siehe diese Fiddle

bearbeiten

Basierend auf Ihrer bearbeiten, den folgenden Code verwenden.

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

Siehe New Fiddle

Answer 2

Ich hoffe, das ist, was Sie suchen.Ich habe ID in Ihrem Code entfernt, da die ID eindeutig sein sollte und ich habe eine Klasse Warenkorb-Zusammenfassung für alle Spannen hinzugefügt.Wenn Sie den folgenden Code ausführen, wird es anhängen die erforderlichen Klassen.

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