Question

所以我需要一些帮助。我正在玩addClass和removeClass，我似乎无法在设置后删除一个类。我基本上想要的是：

当有人点击h3时，会将其添加到其父div类
当有人点击添加了课程的div时，需要删除课程

第一步我走开了，它正在运作

$(function(){
    $('div h3.itemTitle').on('click', function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

现在我定义：

$(function(){
    $('div.active').on('click', function(){
        $(this).removeClass('active');
    });
});

它什么都不做，好像它没有看到类。它仅设置onload ...

帮助，有人吗？

Answer 1

子元素＆＃34; h3.itemTitle＆＃34;已经有一个点击事件监听器，父母实际上无法捕获点击事件。

你的$（＆＃39; div.active＆＃39;）on（＆＃39;点击＆＃39;，...）从未实际触发，因为你点击了h3而不是div。

我推荐这种方法：http://jsfiddle.net/c3Q6Q/

$('div h3.itemTitle').on('click', function () {
    // saves time not to write $(this).parent() everything so i store in a _parent var
    var _parent = $(this).parent();

    if (_parent.hasClass('active')) {
        _parent.removeClass('active');
    } else {
        _parent.addClass('active').siblings().removeClass('active');
    }
});

Answer 2

尝试

 $('body').on('click','div.active', function(){$(this).removeClass('active');});

而不是

$('div.active').on('click', function(){$(this).removeClass('active');});

Answer 3

我会这样走：

$('div').on('click', function(e){
    var el = e.target;
    if($(el).is('h3') && $(el).hasClass('itemTitle')){
       $(this).parent().addClass('active').siblings().removeClass('active');
    }else if($(el).is('div') && $(el).hasClass('active')){
       $(this).removeClass('active');
    }
});

Answer 4

不确定为什么每个人都在讨论在初始DOM加载之外生成的元素。

这是一个JSFiddle，显示它有效：http://jsfiddle.net/H25bT/

代码：

$(document).ready(function() {
    $('.itemTitle').on('click', function() {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });

    /* $('.parent').on('click', function() {
        $(this).removeClass('active');
    }); */

    $('.clicky').on('click', function() {
        $(this).parent().removeClass('active');
    });
});

它不适合您的原因是，如果您将removeClass click事件放在父div上，单击子文本会导致与使用哪个点击处理程序发生冲突，并且它赢得了＆＃39;锻炼身体。如果您不将点击分配给父div本身，则代码可以正常工作。

如何在添加后删除类

4 个答案: