何かがカートに追加された場合の背景色の変更

何も書かずにカートに何も書かれていないときはアイコンが明るい灰色ですが、カートに何かが追加されると赤に変わります。何かがカートに追加された場合の背景色の変更

<span class="cart-item-number">1</span>

カートが1以上の場合、どのように色を変更できますか？これを行うにはJQueryまたはPHPを使用しますか？

出典

2016-08-25 Obama Killed Harambe

は、あなたが私の答えをチェックし、Harambeを殺した –

値に基づいて色を変更するにはjqueryをおすすめします。

spanにはデフォルトでchangeトリガーがありません。あなたがそうのように、手動でchangeをトリガーする必要がありますカートに何かを追加するときに：

$('span').text(v).trigger('change');

その後、あなたはchangeトリガーに耳を傾け、あなたがやりたいことができます。

あなたが使用することができます

$('span').on('change', function() { 
    var v = parseInt($('span').text()); 
    if (v > 0) { 
     $('span').css('background', 'red'); 
    }else{ 
     $('span').css('background', 'gray'); 
    } 
});

出典

2016-08-25 18:02:29 depperm

inputイベント：

$(document).ready(function() { 

    $(".cart-item-number").on("input",function(){ 

     $value = parseFloat($(this).text()); 

     if ($value > 0) 
      $(this).css({backgroundColor:"red"}); 

     else 
      $(this).css({backgroundColor:"gray"}); 
    }) 

})

決勝コード：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     .cart-item-number { 
 
      width: 50px; 
 
      height: 20px; 
 
      border: 2px solid #000; 
 
      display: inline-block; 
 
      background-color: red; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <span class="cart-item-number" contenteditable="true">1</span> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 

 
     $(".cart-item-number").on("input",function(){ 
 

 
      $value = parseFloat($(this).text()); 
 

 
      if ($value > 0) 
 
       $(this).css({backgroundColor:"red"}); 
 

 
      else 
 
       $(this).css({backgroundColor:"gray"}); 
 
     }) 
 

 
    }) 
 
    </script> 
 
</body> 
 
</html>

出典

2016-08-25 18:50:56 Ehsan

@Obamaためのコードが必要です！ – Ehsan

私はこのコードをどこに置くのですか？ –

私はWordpressを使用しています。 –

何かがカートに追加された場合の背景色の変更

答えて

関連する問題