两键开关

Question

我知道可能已经被询问了十亿次，但是我找不到任何解决方案。所以，这是我的代码：

.btn {
  width: 200px;
  height: 45px;
}

.--selected {
  background-color: red;
}

<div class="container">
  <button class="btn --selected">uno</button>
  <button class="btn">dos</button>
</div>

我需要确保在按下按钮之后，它向其添加了一个--selected类，而另一个丢失了，就好像它是两个之间的切换

请帮帮我

Answer 1

您可以尝试使用removeClass()和toggleClass()。

请注意： --selected不是有效的类名。双破折号（--）用于注释CSS中的代码。尽管您可以使用单个，三个连续的破折号，但最好避免使用这些命名模式。

$('.btn').click(function(){
  $('.selected').removeClass('selected');
  $(this).toggleClass('selected');
});

.btn {
  width: 200px;
  height: 45px;
}

.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="btn selected">uno</button>
  <button class="btn">dos</button>
</div>

Answer 2

这会将类添加到单击的按钮上，并从所有其他具有类btn的元素中删除该类。

我稍微修改了类名，使其也成为有效的CSS类名。

$('.btn').on('click', function() {
  $(this).addClass('selected');
  $('.btn').not(this).removeClass('selected');
});

.btn {
  width: 200px;
  height: 45px;
}

.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="btn">uno</button>
  <button class="btn">dos</button>
</div>

Answer 3

简单：

$('.btn').click(function() {
    $('.btn').removeClass('--selected');
    $(this).addClass('--selected');
});

Answer 4

可以使用如下所示的Javascript和ES6轻松完成此操作，无需添加额外的库：

const btns = Array.from(document.querySelectorAll('.btn'));

const toggleClass = (e) => {
  for (var el of btns) {
    el.classList.remove('--selected')
  }
  e.currentTarget.classList.add('--selected')
}

for (var el of btns) {
  el.addEventListener('click', toggleClass)
}

.btn {
  width: 200px;
  height: 45px;
}

.--selected {
  background-color: red;
}

<div class="container">
  <button class="btn --selected">uno</button>
  <button class="btn">dos</button>
</div>

此代码可能会对您有所帮助。