1

JQuery トグルを使用しようとしているため、ユーザーが情報アイコンをクリックすると、アイテム情報を含む非表示の div が表示/非表示になります。何らかの理由でそれは私のために働いていません。

デバッグしようとしているときに、show() が、切り替えたいターゲット要素を正しく表示していることに気付きました。ただし、に置き換えるshow()とtoggle()、機能せず、エラーも返されません。

誰かがこの問題の原因を特定するのを手伝ってくれるかどうか疑問に思っていました.

私のマークアップ

<div class="option">    
    <div class="prod-text">Toy Whistle </div>
    <div>
        <img class="info-icon" src="Info-icon.png">
    </div>
    <div class="option-info" style="display:none;">
        <div>
            <div class="price-text">Price: $100</div>
            <div class="prod-id-text">Item Number: 231912</div>
            <div class="quantity-text">Quantity: 72</div>
        </div>
    </div>
</div>

JQuery (動かない)

$(".info-icon").click(function(){
    $(this).parent().parent().find('.option-info').toggle();
});

JQuery (動作します!)

$(".info-icon").click(function(){
    $(this).parent().parent().find('.option-info').show();
});

よろしくお願いします！

4

1 に答える 1

2

クリック イベント ハンドラーが 2 回バインドされ、クリックごとに 2 回発生する可能性があります。このshow()場合、 は正常に機能しますが、toggle()クリックするたびに要素が表示され、すぐに非表示になります。これを試して：

$(".info-icon").click(function(){
    console.log('click handler fired');
    $(this).parent().parent().find('.option-info').toggle();
});

Web Inspector または Firebug を有効にしてこれを実行し、クリックごとにログに記録されるメッセージの数を確認します。

于 2013-03-02T02:53:39.487 に答える