使用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，非常感谢任何帮助。添加项目时，购物车价值可在页面上更改。

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

希望这是你正在寻找的。我已经在你的代码中删除了id，因为id应该是唯一的，我已经为所有spans添加了一个类cart-summary。一旦你运行下面的代码，它将追加所需的类。

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