Question

当用户点击使用标记创建的按钮时，我正在尝试侦听点击/切换事件（课程更改）：

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

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

Answer 1

您可以改为使用 .toggleClass() ：

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

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

<强> Fiddle Demo

Answer 2

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

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

<强> DEMO

Answer 3

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

Jquery侦听单击事件和类更改

3 个答案: