Jquery 监听点击事件和类变化答案

【问题标题】：Jquery Listen for click event and class changeJquery 监听点击事件和类变化
【发布时间】：2014-03-26 23:26:34
【问题描述】：

当用户单击使用 a 标签创建的 a 按钮时，我正在尝试监听 click/toggle 事件（类更改）：

<a href="#" class="ccc-toggle-shadow"></a>

流程如下：

如果用户点击链接，一个类，切换，被添加到标签，按钮颜色变为红色：

<a href="#" class="ccc-toggle-shadow toggled"></a>

如果用户再次点击链接，切换的类被移除，按钮颜色变为绿色：

<a href="#" class="ccc-toggle-shadow"></a>

这是我目前听到的变化：

所以基本上当用户点击按钮时，切换类会自动添加到按钮类中。我想在添加新类时捕获事件。一旦它看到按钮有新的类，切换，做点什么。

var a = $("a.ccc-toggle-shadow");  

a.on("click", function(e) {
    e.preventDefault();
    var b = $(this);

    if (b.hasClass('toggled')) {
        console.log('activated');  //test in console
    } else {
        console.log('deactivated'); // test in console
    }
    return false;
});

我似乎无法让它工作。有人可以帮助我吗？

【问题讨论】：

那么b是什么，你有a？
代码已被编辑。
@user3442787：您是否尝试过以下共享答案？

标签： jquery events click toggle

【解决方案1】：

您可以改用 .toggleClass()：

从集合中的每个元素中添加或删除一个或多个类匹配的元素，取决于类的存在或 switch 参数的值。

$("a.ccc-toggle-shadow").on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('toggled');
});

Fiddle Demo

【讨论】：

【解决方案2】：

使用.toggleClass()向html元素添加/删除一个或多个类：

$("a.ccc-toggle-shadow").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('toggled');
});

DEMO

【讨论】：

【解决方案3】：

解决方案：由于我使用的是插件，我必须等待插件加载才能监听事件。我不得不使用 jQuery(window).load(function(){});

【讨论】：