3

我有两个空的和有色的。一旦我单击彩色类，然后删除彩色类并添加空类。我再次单击它应该添加彩色类并移除空类。但它不起作用。

            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 回答