如何在单个元素上重复使用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;
        }
    }
});

Answer 2

将所有类放在一个数组中,然后单击链接添加类,如下所示.

var classes = ["first", "second", "third", "fourth"];
$("#menu li a").click(function () {
    var index = classes.indexOf(this.className);
    var newIndex = (index + 1) % classes.length; //return to first after reaching last

    $(this).removeClass(classes[index]).addClass(classes[newIndex]);
});

.first { color: red; }
.second { color: green; }
.third { color: blue; }
.fourth { color: purple; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
    <li>
        <a class="first" href="#">Test 1</a>
    </li>
</ul>