39

私は非常に単純なことをしようとしています。基本的に、クリック可能なdivの「ホットスポット」があります。クリックすると、画面がいっぱいになり、コンテンツが表示されます。div のクラスを変更し、「spot」を削除して「grown」を追加するだけでこれを達成しました。それを成長させるための小さな CSS アニメーションがあります。これはうまくいきます。

問題は、この div 内に、現時点では単なるテキストである close_button があることです。これでクラスを元に戻したいです。つまり、grown と readd spot を削除します。クリックすると、これは行われません。DOM の読み込み時にこれらのクラスを持たない要素に関係していると思いますが、jQuery は初めてで、これを回避する方法がわかりません。

おそらくもっと賢明な方法があると思いますが、誰かが私を正しい方向に向けることができますか? とても感謝しています。代わりに toggleClass を使用してみましたが、役に立ちませんでした。

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

アップデート：

私は今このコードを使用しています、

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
    });  


    $(document).on("click", ".clickable", function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});

奇妙なことに、close_button 関数はまだ「spot」を追加したり、「grown」を削除したりしませんが、他のクラスを追加し、他のクラスを削除します...おそらく両方の関数が同時にトリガーされていると思われるため、if 句を追加しました時間、お互いを元に戻しますが、違いはないようです

4

10 に答える 10

80

何が起こるかというと、閉じるボタンが.clickablediv 内に配置されるため、両方の要素でクリック イベントがトリガーされます。

イベント バブリングにより、クリック イベントが子ノードから親ノードに伝播されます。したがって、.close_buttonコールバックが最初に実行され、に.clickable達すると、クラスが再び切り替えられます。これは非常に高速に実行されるため、2 つのイベントが発生したことに気付くことはありません。

                    / \
--------------------| |-----------------
| .clickable        | |                |
|   ----------------| |-----------     |
|   | .close_button | |          |     |
|   ------------------------------     |
|             event bubbling           |
----------------------------------------

イベントが に到達.clickableしないようにするには、イベント パラメータをコールバック関数に追加してから、そのstopPropagationメソッドを呼び出す必要があります。

$(".close_button").click(function (e) { 
    $("#spot1").addClass("spot");
    $("#spot1").removeClass("grown");
    e.stopPropagation();
});

フィドル: http://jsfiddle.net/u4GCk/1/

一般的なイベントの順序に関する詳細情報: http://www.quirksmode.org/js/events_order.html (ここで、きれいな ASCII アートを選択しました =])

于 2013-10-30T21:42:14.697 に答える
16

この問題は、イベントのバブリングが原因で発生します。追加するコードの最初の部分は正常に.grown機能します。

リンクをクリックしたときの 2 番目の部分「成長したクラスの削除」は、 と の両方のハンドラーが実行されるため.close_button、期待どおりに機能しません。そのため、クラスを.clickable削除して.growndiv

e.stopPropagation()これを回避するには、内部.close_buttonクリック ハンドラーを使用して、イベントがバブリングしないようにします。

デモ: http://jsfiddle.net/vL8DP/

完全なコード

$(document).on('click', '.clickable', function () {
   $(this).addClass('grown').removeClass('spot');
}).on('click', '.close_button', function (e) {
   e.stopPropagation();
   $(this).closest('.clickable').removeClass('grown').addClass('spot');
});
于 2013-10-31T16:27:45.607 に答える
7

複数回使用する jQuery オブジェクトをキャッシュすることをお勧めします。例えば：

    $(document).on("click", ".clickable", function () {
        $(this).addClass("grown");
        $(this).removeClass("spot");
    });

だろう：

    var doc = $(document);
    doc.on('click', '.clickable', function(){
       var currentClickedObject = $(this);
       currentClickedObject.addClass('grown');
       currentClickedObject.removeClass('spot');
    });

実際にはより多くのコードがありますが、$(this) オブジェクトを取得するために jQuery ライブラリ全体を「ウォークスルー」する必要がないため、はるかに高速です。

于 2013-11-06T10:27:49.987 に答える
1

これを試して ：

$('.close-button').on('click', function(){
  $('.element').removeClass('grown');
  $('.element').addClass('spot');
});

$('.element').on('click', function(){
  $(this).removeClass('spot');
  $(this).addClass('grown');
});

私はあなたの質問を理解したと思います.

于 2013-09-24T16:09:16.967 に答える