在每次单击鼠标时更改元素类

Question

我想在每次点击它时更改元素类。

关于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_first_look更改为btn_second_look，否则。

但繁荣。什么都没发生

Answer 1

分别使用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');
       }        
 });

这会添加按钮没有的类，并删除它所执行的类。

Answer 2

toggleClass将自行添加和删除

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

Demo Fiddle

Answer 3

试试这个。

如果您的元素从一开始就具有类btn_first_look，则可以编写

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

这将删除课程btn_first_look并添加课程btn_second_look。如果您再次执行此操作，则会删除课程btn_second_look并恢复课程btn_first_look。

Answer 4

在最后添加一个括号。您的第一个(function()没有关闭，因此无效。

Answer 5

这对你有用

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