1

チェックボックスのトグルとしてDIVを使用するフォーム設定があります。クリックするためにDIVを監視し、クラスを切り替えて画像を変更するjQueryコードがあります。簡単ですよね？

すべてがうまく機能しましたが、チェックボックスを製品オプションの価格と組み合わせて使用​​すると（使用しているフォームとカートのプラグインによって指定されます）、jQueryが機能しません。

別のクラス、または価格設定構造に関連する何かがコードをオーバーライドしていると思いましたが、DIVは機能しているバージョンと機能していないバージョンの間で同一に見えます。私は何が起こっているのか途方に暮れています—jQueryは私が見ることができるものに基づいてまだ機能するはずです。

ここでフォームをチェックできます：http：//bit.ly/YZBdbc

違いがわかるように、両方のチェックボックスの例を投稿しました（[オプションの選択]の下）。上の方は視覚的には希望どおりに機能しますが、価格設定は追加されません。下の方は切り替えられませんが、価格設定は機能します。はぁ。

よろしくお願いします！

編集：これがjQueryコードです：

jQuery('#cart_option_1').click(function() {
    jQuery(this).toggleClass('active');
});
    jQuery('#cart_option_2').click(function() {
    jQuery(this).toggleClass('active');
});
    jQuery('#cart_option_3').click(function() {
    jQuery(this).toggleClass('active');
});

作業ブロックのDIVコードは次のとおりです。

<div class='ginput_container'><ul class='gfield_checkbox' id='input_1_25'><li class='gchoice_25_1'><input name='input_25.1' type='checkbox' value='Month-to-Month +$10.00' id='choice_25_1' tabindex='2' /><label for='choice_25_1'><div id="cart_option_1b"></div></label></li>

そして、動作していないブロックからのコード（基本的に同じです）：

<div class='ginput_container'><ul class='gfield_checkbox' id='input_1_26'><li class='gchoice_26_1'><input name='input_26.1' type='checkbox' value='Month-to-month|10' id='choice_26_1' tabindex='5' /><label for='choice_26_1'><div id="cart_option_1"></div></label></li>

4

1 に答える 1

0

それをクラスにするだけです。

<div class="cart_option" id="cart_option_1"></div>

次に、クリックイベントをクラスに適用します。

$('.cart_option').on('click',function(){
    $(this).toggleClass('active');
});

明確化のために編集: 、 、に適用された一意の画像を引き続き持つことができますがcart_option_1、cart_option_1bすべてにクラスが関連付けられているため、クリックイベントはすべてに適用されます。

于 2013-03-13T15:19:29.627 に答える