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

Answer 3

您可以使用.data()

HTML：

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

JS：

$(".first").data("classes",["one","two","three","four"]).click(function() {
  var elem = $(this);
  var cnt = (elem.data("cnt") || 0)
  var classes = elem.data("classes");
  elem.removeClass().addClass(classes[cnt % classes.length] + " first").data("cnt",++cnt);
});

演示

 $(".first").data("classes",["one","two","three","four"]).click(function() { var elem = $(this); var cnt = (elem.data("cnt") || 0) var classes = elem.data("classes"); elem.removeClass().addClass(classes[cnt % classes.length] + " first").data("cnt",++cnt); }); 

 .one{ color:red; } .two{ color:yellow; } .three{ color:green; } .four{ color:blue; } 

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

Answer 4

假设你实际上只有一个链接，你想要改变它的状态，而不是菜单中的一堆链接，当你点击一个时，你想要将所有链接从“.first”移动到“.second”，我会建议这是最惯用的方式（双关语无意）。

// Only select the menu once
var $menu = $('#menu');

// Delegate to elements with the correct class.
// Specifying the "li a" is probably unnecessary,
// unless you have other elements with the same classes in "#menu".
$menu.on('click', '.first', function(e) {

    // Inside a jQuery event handler,
    // `this` refers to the element that triggered the event.
    // If the event is delegated, it's the delegation target
    // (".first" in this instance), not the bound element ("#menu").
    $(this).removeClass('first').addClass('second');

});

$menu.on('click', '.second', function(e) {
   $(this).removeClass('second').addClass('third');
});

$menu.on('click', '.third', function(e) {
   $(this).removeClass('third').addClass('fourth');
});

资源：

• 为什么要缓存jQuery选择器？
• jQuery中的事件委派
• jQuery事件中的“this”
• 一般的jQuery优化

Answer 5

不确定这是否会解决您的问题，但我会拍摄一个条件语句，只有一个委托事件监听器：

$("#menu li").on('click', 'a', function()
{
   if($(this).hasClass('first'))
   {
       $(this).removeClass('first').adddClass('second');
   }
   elseif($(this).hasClass('second'))
   {
       $(this).removeClass('second').adddClass('third');
   }
   // etc...
}

Answer 6

如果要绑定事件，则必须先存在所选元素。

要将事件处理程序绑定到尚不存在的元素（例如，动态创建或修改），您可以执行以下操作：

$(document).on('click', '#menu li a.first', function() {

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

});

$(document).on('click', '#menu li a.second', function() {

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

});

$(document).on('click', '#menu li a.third', function() {

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

});

Answer 7

<a class="changable first" href="#">Test 1</a>
$( ".changable" ).click(function(event) {
classes = ['first','second','third','fourth']
changed=false
for (c in classes){
    if (event.target.classList.contains(classes[c]) && changed==false){
       $(this).removeClass((classes[c]));
       index_to_add=classes.indexOf(classes[c])+1
       class_to_add=classes[index_to_add]
       $(this).addClass(class_to_add);
       changed=true;
    }
}

}）;

Answer 8

好的，所以有一些解决方法，这还没有提到。

您可以使用Javascript对象，而不仅仅是数组。 如果您想要链而不是列表，对象可以更容易。

var classNames = {first:'second', second:'third', third:'fourth'};

$('#menu li a').on('click', function() {
    if(typeof classNames[this.className] !== 'undefined'){
        this.className = classNames[this.className];
    }
});

第二种方法是使用.on('click', [selector], handler)而不是click哪个可以处理动态加载，添加或更改的元素。

$('#menu li').on('click', 'a.first', function() {
    $(this).removeClass("first").addClass("second");
});

$('#menu li').on('click', 'a.second', function() {
   $(this).removeClass("second").addClass("third");
});

$('#menu li').on('click', 'a.third', function() {
   $(this).removeClass("third").addClass("fourth");
});

甚至不是完美但仍然是一个有效的解决方案。

您可以在函数内使用if .. else或switch .. case来创建决策树。

所以基本上有很多解决方案。 选择最好的。

Answer 9

尝试将事件绑定到父级，

我的尝试，

 var $classes = ['first', 'second', 'third']; $(function(){ $('#subject').click(function(){ current = $(this).find('a:first'); index = $.inArray(current.attr('class'), $classes); if($classes.length > index+1) current.removeClass($classes[index]).addClass($classes[index+1]) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='subject'> <a class="first" href="#">Test 1</a> </div> 

Answer 10

不，你不能。 由于JavaScript仅在页面加载后运行（如果将它们放在$( document ).ready()函数中），下面的其他函数将永远不会执行 。 它只能检测<a class="first" href="#">Test 1</a>而不能<a class="second" href="#">Test 1</a>因为<a class="second" href="#">Test 1</a>是在页面加载后生成的，因此永远不会执行，除非您使用的是Ajax。

更新：这可以完成。 请参阅下面的@ i3b13评论。