Javascript 更改元素的类别，每次鼠标单击

我想改变元素的类，每次我点击它

关于css部分，我有：

myButton.btn_first_look {
    /* some atributes */
}
myButton.btn_second_look{
    /* some atributes */
}

小jquery：

$(document).ready(function(){
    $('#myButton').click(function() {
    $(this).toggleClass('btn_first_look');
    $(this).toggleClass('btn_second_look');
})};

所以，当我单击元素时，我希望jquery脚本将元素类从

btn\u first\u look

更改为

btn\u second\u look

，否则

但繁荣。没有发生任何事情

分别使用

removeClass（）

和

addClass（）

 $('#myButton').click(function() {         
      //if button has class btn_first_look
       if($(this).hasClass('btn_first_look')){
         $(this).removeClass('btn_first_look');
         $(this).addClass('btn_second_look');
       }

       //if button has class btn_second_look
       else if($(this).hasClass('btn_second_look')){
          $(this).removeClass('btn_second_look');
          $(this).addClass('btn_first_look');
       }        
 });

---

这将添加按钮没有的任何类，并删除它有的类。

toggleClass

将自行处理添加和删除

$('#myButton').click(function() {
        $(this).toggleClass('btn_second_look btn_first_look');
 };

试试这个

如果元素从一开始就具有class

btn\u first\u look

，则可以编写

$(element).toggleClass("btn_first_look btn_second_look");

---

这将删除类

btn\u first\u look

，并添加类

btn\u second\u look

。如果您再次这样做，它将删除class

btn\u second\u look

，并恢复class

btn\u first\u look

在末尾添加一个括号。您的第一个

（function（）

没有关闭，因此它将不起作用。

这将对您起作用

$(document).ready(function(){
  $('#myButton').click(function(){
    $(this).toggleClass('btn_first_look btn_second_look');
  });
});

---

发布该按钮的html。您的函数正在同时切换两个类。如果出现语法错误，请检查控制台。该问题似乎与主题无关，因为它是关于语法错误的……假设该按钮从一开始就有“btn\u second\u look”类……您的代码可以工作吗？@Arjit请查看预期答案。