値がロードされた後にクラスを動的にJavascriptで変更

Question

ここでは、CSSクラスを動的に変更するためのコードをいくつか用意しています。このコードでページを読み込むと、span_cart countが0より大きいときにクラスを 'cart'として保持するだけです。何かが正しく読み込まれていないかどうかはわかりません。ここで

http://store.revivesalonsf.com

私は同じことを行うために取り組んできましたJSFiddleの一例です。どのようにこの作品を作るための任意の考えですか？私はゆっくりではあるが、あまりにもひどくjsを学んでいるので、どんな指導も感謝する

http://jsfiddle.net/xs9e6moL/65/

$(document).ready(function() { 
 
    $("span").each(function() { 
 
    if (parseInt($(this).text()) > 0) { 
 
     $(this).parent().find('a').removeClass("cart"); 
 
     $(this).parent().find('a').addClass("cart-full"); 
 
    } 
 
    }); 
 
});

.cart-full { 
 
    border: 2px solid red 
 
} 
 

 
.cartContainer { 
 
    padding-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<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>

Answer 1

あなたがアイテムのカウントがSPAN要素に増加した場合のクラスを変更したい場合、あなたはあなたのjsのaddtocartスクリプトとそのイベントを変更する必要がありますそこ。毎秒の値をチェックするインターバルを追加し、それに基づいてクラスを更新することによって、あなたが望むことを行うための素早い代替方法があります。 カートに追加スクリプトを管理する方法を知っている場合は、2番目の方法を使用することをおすすめしません！ これを試してみるとうまくいきます。 例：

window.setInterval(function(){ 
    if (parseInt($("span.cart-summary__count").text()) > 0) { 
    $("span.cart-summary__count").parent().find('a').removeClass("cart").addClass("cart-full"); 
    } 
},1000); 

Answer 2

コードは正しいです。問題は、DOMが既にレンダリングされているときに製品の数が取得されるという事実です。

可能な解決策は、スクリプトが表示可能な数の製品を更新するときに要素のクラスを変更することです。あなたはDOMSubtreeModifiedイベントを使用することができ、すべてのファイルへのアクセス権を持っていない場合

function itemCount(count) { 
    if (count === undefined) { 
     return currentCartCount; 
    } else { 
     currentCartCount = count; 

     if(currentCartCount > 0) { 
      // change style of the cart to full 
     } else { 
      // change style of the cart to empty 
     } 

     $("[data-v-observable='cart-count']").text(count); 
     return count; 
    } 
} 

---

：あなたはvolusion.jsファイル内の関数itemCountに興味がある

$jQueryModern(document).ready(function() { 
    $jQueryModern("#cart-summary").on('DOMSubtreeModified', "span", function() { 
     if (parseInt($jQueryModern(this).text()) > 0) { 
     $jQueryModern(this).parent().find('a').removeClass("cart"); 
     $jQueryModern(this).parent().find('a').addClass("cart-full"); 
     } else { 
     $jQueryModern(this).parent().find('a').removeClass("cart-full"); 
     $jQueryModern(this).parent().find('a').addClass("cart"); 
     } 
    }); 
}); 

$("#cart-summary").on('DOMSubtreeModified', "span", function() { 
 
    if (parseInt($(this).text()) > 0) { 
 
    $(this).parent().find('a').removeClass("cart"); 
 
    $(this).parent().find('a').addClass("cart-full"); 
 
    } else { 
 
    \t $(this).parent().find('a').removeClass("cart-full"); 
 
    $(this).parent().find('a').addClass("cart"); 
 
    } 
 
}); 
 

 
$('#add').click(function() { 
 
    var newValue = parseInt($("[data-v-observable='cart-count']").text(), 10) + 1; 
 
    $("[data-v-observable='cart-count']").text(newValue); 
 
}); 
 

 
$('#remove').click(function() { 
 
    var newValue = parseInt($("[data-v-observable='cart-count']").text(), 10) - 1; 
 
    if (newValue === -1) newValue = 0; 
 
    $("[data-v-observable='cart-count']").text(newValue); 
 
});

.cart-full { 
 
    border: 2px solid red 
 
} 
 

 
.cartContainer { 
 
    padding-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<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> 
 

 
<button id="add">Add item</button> 
 
<button id="remove">Remove item</button>