Two buttons switch

Question

I know that it might have been asked billion times, but I could not find any solutions. So, here is my code:

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

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

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

I need to make that after pressing button it added a --selected class to it, and another one lost it, as if it is a switch between two

Help me out, please

http://api.jquery.com/addclass, http://api.jquery.com/removeclass — Rory McCrossan, Nov 13 '18 at 16:22
I'm not sure why you removed your jQuery code from the question? You've made it worse by doing that — Rory McCrossan, Nov 13 '18 at 16:23
I know how to add class to an element. The question is how to make one lose it after I pressed a different button — Max Popov, Nov 13 '18 at 16:24
Not complicated ... `$('.btn.--selected').removeClass('--selected')` — charlietfl, Nov 13 '18 at 16:25
Can you post the code where you attempted to do this please? — War10ck, Nov 13 '18 at 16:25
`addClass()` adds, `removeClass()` removes and `toggleClass()` toggles. You can find this all in the documentation. https://api.jquery.com/ — Mark Baijens, Nov 13 '18 at 16:25
I don't think `--selected` is a valid class name. See https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors — Robin Zigmond, Nov 13 '18 at 16:25
@RobinZigmond I don't think it's invalid as much as its discouraged. _W3C_ recommends that leading `-` characters be reserved for vendor specific CSS such as `-moz` and `-webkit`... — War10ck, Nov 13 '18 at 16:27
Possible duplicate of [How do I add a class to a given element?](https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element) — ksav, Nov 13 '18 at 16:27
@War10ck I wasn't personally too sure (I never use class names that don't start with letters), but according to my brief googling starting with 2 hyphens isn't allowed, eg: https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/ On the other hand that link refers to the 2.1 spec, it's possible it's now OK - and even more likely that, even if it's technically not allowed, browsers probably accept it anyway. But that doesn't make it good practice (imo). — Robin Zigmond, Nov 13 '18 at 16:29
@RobinZigmond Agreed. That's an interesting read too. I hadn't seen that before. Great find! Learn something new everyday. — War10ck, Nov 13 '18 at 16:29

Mamun · Answer 1 · 2018-11-14T04:38:44.647

You can try with removeClass() and toggleClass().

Please Note: --selected is not a valid class name. Double dash (--) is used to comment code in CSS. Though you can use like single, triple consecutive dashes, it is good practice to avoid those naming pattern.

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

Can you eliminate the looping by doing `$('.selected').removeClass('selected')`? it may be a little more efficient... — War10ck, Nov 13 '18 at 16:31

score 1 · Answer 2 · answered Nov 13 '18 at 16:29

This will add the class to the button clicked and removes the class from all other elements with the class btn.

I changed the classname a little to make it a valid css class name too.

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

score 0 · Answer 3 · edited Nov 13 '18 at 17:59

0

Simple:

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

edited Nov 13 '18 at 17:59

pushkin

7,514
14
41
74

answered Nov 13 '18 at 16:30

Peter Bode

211
1
9

score 0 · Answer 4 · answered Nov 13 '18 at 16:54

This can be done easily using vanilla Javascript and ES6 as below, not need to add extra library:

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>

this code might help you.

Two buttons switch

4 Answers4