3

私は空のクラスと色付きのクラスを2つ持っています。色付きのクラスをクリックしたら、色付きのクラスを削除して空のクラスを追加します。もう一度クリックすると、色付きのクラスが追加され、空のクラスが削除されます。しかし、それは機能していません。

            var color_click = false;
            var select_color = "";
            $( ".colored").on('click',function(e){
                if(color_click != true){
                    color_click = true;
                    select_color = $(this).css('background-color');
                    $(this).removeClass("colored");
                    $(this).addClass( "empty");
                    $(this).css('background-color','')
                }
            });


            $( ".empty").click(function(){
                if(color_click == true){
                    color_click = false;
                    $(this).css('background-color',select_color);
                    $(this).addClass("colored");
                    $(this).removeClass( "empty");

                }
            });
4

3 に答える 3

5

はい。これは、イベントをその特定のクラスにバインドするためです。on()を使用して、イベント委任を使用して問題を解決できます。イベントバインディングが発生すると、クラスには要素がなく.empty、バインディングは効果がありません。ドキュメント ヘッド (私の例で使用) を使用する代わりに、常に DOM に存在し、この要素を保持するコンテナーを使用します。したがって、イベントの委任を使用すると、現在および将来の DOM に存在する要素の委任のために、実際にイベントをコンテナー/ドキュメント ヘッドにバインドします。

これとは別に、あいまいなチェックを削除し、チェーンを使用するためにいくつかの変更を加えました。

   $(document).on('click', ".colored", function(e){
            if(!color_click){ // You dont need this check if your variable is modified only in these 2 events
                color_click = true;
                select_color = $(this).css('background-color');
                $(this).removeClass("colored").addClass( "empty").css('background-color','');

            }
        });


        $( document).on('click', ".empty", function(){
            if(color_click){// You dont need this check if your variable is modified only in these 2 events
                color_click = false;
                $(this).addClass("colored").removeClass("empty").css('background-color',select_color);

            }
        });
于 2013-06-23T06:36:54.567 に答える
1

クラスのクリック ハンドラーを再バインドする必要があります。

これを関数 (例: bindClicks) でラップし、新しいクラスを追加するときに bindClicks() を呼び出します。

于 2013-06-23T06:36:01.017 に答える
1

$(".empty").clickクラスを要素に割り当てた直後にコードを配置します。DOMReady では、このクラスの要素がなく、クラスを変更しても DOM Ready が再度呼び出されないため、このクリック ハンドラーは何もしません。およびその逆。

    var color_click = false;
    var select_color = "";
    bindColor(); bindEmpty();
    function bindEmpty() {
        $(".empty").click(function () {
            if (color_click == true) {
                color_click = false;
                $(this).css('background-color', select_color);
                $(this).addClass("colored");
                $(this).removeClass("empty");
                bindColor();
            }
        });
    }
    function bindColor() {
        $(".colored").on('click', function (e) {
            if (color_click != true) {
                color_click = true;
                select_color = $(this).css('background-color');
                $(this).removeClass("colored");
                $(this).addClass("empty");
                $(this).css('background-color', '')
                bindEmpty()
            }
        });
    }
于 2013-06-23T06:37:29.087 に答える