javascript - 如何在单个元素上重复使用addClass和removeClass？

Question

所以我想要实现的只是在每次点击时更改 HTML 链接的类，如下所示:

• 删除 .first 类(如果存在)，然后添加 .second 类
• 删除 .second 类(如果存在)，然后添加 .third 类
• 删除 .third 类(如果存在)，然后添加 .fourth 类
• 等等......

到目前为止还没有运气。我可能做错了什么？

这是我在其中尝试 jQuery 代码的单行 HTML 代码:

<a class="first" href="#">Test 1</a>

这是我的 jQuery:

$( "#menu li a.first" ).click(function() {

   $( "#menu li a.first" ).removeClass("first").addClass("second");

}

$( "#menu li a.second" ).click(function() {

   $( "#menu li a.second" ).removeClass("second").addClass("third");

}

$( "#menu li a.third" ).click(function() {

   $( "#menu li a.second" ).removeClass("third").addClass("fourth");

}

提前致谢!

Answer 1

问题是您试图在事件处理程序具有类 second 或 third 之前附加它。

此外，这种方法非常冗长。我建议简单地提供一系列类。就像这样:

var classNames = ['first', 'second', 'third'];

然后向按钮添加不同的标识符，例如添加一个类class-changer。并附加以下事件处理程序。

$('.class-changer').on('click', function() {
    var $el = $(this)
    for (var i= 0; i < classNames.length; i++) {
        if ($el.hasClass(classNames[i]) && classNames[i+1]) {
           $el.removeClass(classNames[i]).addClass(classNames[i+1]);
           break;
        }
    }
});