两个按钮像单选按钮一样变化 class 但一次只有一个

Question

$('#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');
  }

})

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

.as-one {
  color: blue;
}

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

.as-two {
  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-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>

在我的代码中，我希望能够仅更改一个按钮的 class，从 red 到 blue，但是如果我点击另一个按钮，第一个按钮会转动到默认 class red 如果它是 blue 另一个切换到 blue 反之亦然。

Answer 1

也许不是我想要的方式 - 但你去吧！单击 axe 时，添加 as-in-two class 并删除 as-two class，单击 saw 时，添加 as-in-one class 并删除 as-one class.

参见下面的演示：

$('#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');
  }

})

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

.as-one {
  color: blue;
}

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

.as-two {
  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-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>

最好使用单个 red 和 blue class:

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

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

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

Answer 2

按钮不需要单独的类，如果您在按钮上使用相同的类，会更容易：只需 select 和 "other" 按钮并重置其状态：

$('#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

我想你正在寻找这样的东西。

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

.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>

两个按钮像单选按钮一样变化 class 但一次只有一个

Two buttons changing class like radio buttons but only one at the time

html

javascript

css

jquery

jquery-selectors