Question

如果按钮使用jquery点击，我会尝试更改按钮的颜色。

我的代码bellow工作，它会将展开类添加到单击的按钮。但是如果点击另一个按钮，我需要知道如何删除该类并将旧类添加到其中，反之亦然。

现在这是我的代码：

$(".mybtn").click(function(){
  $(this).removeClass( "mybtn" ).addClass('expand');

});

并且html是这样的：

<button name='mybtn' id='mybtn' class='mybtn' value='1'>1</button>
<button name='mybtn' id='mybtn' class='mybtn' value='2'>2</button>
<button name='mybtn' id='mybtn' class='mybtn' value='3'>3</button>

并且css是一个带背景颜色的简单css：

.mybtn{
background-color:#fff;
}

.expand{
background-color:#000;
}

任何帮助将不胜感激。

Answer 1

首先重置所有“expand”类对象：

$(".mybtn").click(function(){
   // remove expand class and add original mybtn class
  $(".expand").removeClass( "expand").addClass("mybtn");

  $(this).removeClass( "mybtn" ).addClass('expand');

});

请参阅Fiddle

上的工作示例

Answer 2

$('.mybtn').toggle(function () {
    $(".mybtn").removeClass("mybtn").addClass("expand");
}, function () {
    $(".mybtn").removeClass("expand").addClass("mybtn");
});

Answer 3

试试这个：

$(".mybtn").each(function(){    
   $(this).click(function(el, ev){
      $('button#mybtn').addClass('mybtn').removeClass('expand'); 
      $(this).removeClass( "mybtn" ).addClass('expand');     
   }); 
})

删除按钮上的CSS样式单击jquery？

3 个答案: