Question

我有两个班级空着色。一旦我点击了彩色类，然后删除彩色类并添加空类。我再次点击它应该添加彩色类和remoce空类。但它没有用。

            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");

                }
            });

Answer 1

是。那是因为您将事件绑定到该特定类。您可以使用 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);

            }
        });

Answer 2

您需要重新绑定类的单击处理程序

将其包装在一个函数中（例如bindClicks），然后在添加新类时调用bindClicks（）。

Answer 3

在将类分配给元素后立即放置$(".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()
            }
        });
    }

.addClass（）之后的.removeClass（）不起作用

3 个答案: