Question

$('.option').click(function(){
        $(this).addClass('selected');
        });
    $('.selected').click(function(){
        $(this).removeClass('selected');
        });

当我点击具有类（已选择）的元素时，尝试删除所选的类。

addClas可以使用，但删除则不行。：/

Answer 1

您可以使用toggleClass。

$('body').on('click', '.option', function() {
    $(this).toggleClass('selected');
});

Answer 2

您的问题是您正在将事件附加到尚未准备好接收该事件的元素。您应该将事件附加到父元素，然后您可以过滤.selected。这样，无论何时添加可点击元素都无关紧要，它将起作用。这称为事件委托。您将处理事件的任务委托给另一个元素。

你的JS：

$(document).on("click", ".selected", function() {
    $(this).removeClass('selected');
});

$(document).on("click", ".option", function() {
    $(this).addClass('selected');
});

如果你不需要在各个按钮上使用不同的功能（我认为你会这样做），你可以将两者结合起来：

$(document).on('click','.selected.option',(function() {
    $(this).toggleClass('selected');
});

此外，在执行此操作时，请勿将其附加到树太高的父级。您想将它附加到最近的可能父元素。我们不需要对document这样的事件进行点击事件，因为特定于哪些元素会获得此事件是个好主意。将其附加到document意味着任何具有.selected类的元素都可以单击并响应相同的代码。如果您想在不同的按钮中使用不同的功能，则不能，因为它们都响应了附加到document的相同代码。

Answer 3

$('.option').on('click', function(){
    if(!$(this).hasClass("selected")) {
        $(this).addClass('selected');
    }
});
$('.selected').on('click', function(){
    $(this).removeClass('selected');
});

但是你会使用切换类方法获得最佳效果！

单击要删除的类时如何removeClass

3 个答案: