Question

＆＃13;

$('#axe, #saw').click(function(e) {
  var id = $(this).attr('id');
  if (id == 'axe') {
    $(this).toggleClass('as-in-one as-one');
  } else if (id == 'saw') {
    $(this).toggleClass('as-in-two as-two');
  }

})

＆＃13;

.as-in-one {
  color: red;
}

.as-one {
  color: blue;
}

.as-in-two {
  color: red;
}

.as-two {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>

＆＃13;

在我的代码中，我希望只能更改一个按钮的类，从red到blue，但如果我点击另一个按钮，则第一个按钮变为默认类red如果它是blue而另一个被切换到blue，反之亦然。

Answer 1

也许不是我想做的 - 但是你去了！单击axe后，添加as-in-two类并删除as-two类，单击saw后，添加as-in-one类并删除{{ 1}} class。

见下面的演示：

＆＃13;

as-one

＆＃13;

$('#axe, #saw').click(function(e) {
  var id = $(this).attr('id');
  if (id == 'axe') {
    $(this).toggleClass('as-in-one as-one');
    $('#saw').addClass('as-in-two');
    $('#saw').removeClass('as-two');
  } else if (id == 'saw') {
    $(this).toggleClass('as-in-two as-two');
    $('#axe').addClass('as-in-one');
    $('#axe').removeClass('as-one');
  }

})

＆＃13;

.as-in-one {
  color: red;
}

.as-one {
  color: blue;
}

.as-in-two {
  color: red;
}

.as-two {
  color: blue;
}

＆＃13;

最好使用单个<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id='axe' class='axe as-in-one'>AXE</button> <button id='saw' class='saw as-in-two'>SAW</button>和red类：

＆＃13;

blue

＆＃13;

$('.as-in-one').click(function(e) {
   $('.as-in-one').not(this).removeClass('as-one');
   $(this).toggleClass('as-one');
})

＆＃13;

.as-in-one {
  color: red;
}
.as-in-one.as-one {
  color: blue;
}

＆＃13;

Answer 2

按钮不需要单独的类，如果在它们上使用相同的类，则更容易：只需选择“其他”按钮并重置其状态：

$('#axe, #saw').click(function(e) {
  var id = $(this).attr('id');
  var other = $(id == 'axe' ? '#saw' : '#axe');
  $(this).toggleClass('as-in as');
  other.removeClass("as").addClass("as-in");
});

.as-in {
  color: red;
}

.as {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in'>AXE</button>
<button id='saw' class='saw as-in'>SAW</button>

Answer 3

我认为你正在寻找这样的事情。

＆＃13;

$('#axe, #saw').click(function(e) {
  if(!$(this).hasClass('as')){
    $(this).toggleClass('as');
    $(this).siblings().not(this).removeClass('as');
  }
})

＆＃13;

.as-in {
  color: red;
}

.as {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in'>AXE</button>
<button id='saw' class='saw as-in'>SAW</button>

＆＃13;

两个按钮改变类，如单选按钮，但当时只有一个

3 个答案: