javascript - 使用 Javascript 或 jQuery 动态更改 CSS

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>

更改为:

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

我仍在学习 Js，如有任何帮助，我将不胜感激。添加商品时，页面上的购物车值(value)可能会发生变化。

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