CODEWITHSUNDEEP
javascriptjquery
K. Bert
K. Bert

Reputation: 144

Click and remove/add multiple Classes with multiple Buttons

I have some buttons:

enter image description here

When users click on button I need 3 actions:

The code bellow works fine. But I had 20 buttons. And would be a big code. So my question is: There is a way to simplify what I need to do?

I saw others questions on stackoverflow, but I did not find what I looking for.

$("body  .buttons div:nth-child(1)").click(function() {
  $('body').removeClass('A B C D');
  $('body').addClass('A');
  $('body .buttons div').removeClass('active');
  $('body .buttons div:nth-child(A)').addClass('active');
});

$("body .buttons div:nth-child(2)").click(function() {
  $('body').removeClass('A B C D');
  $('body').addClass('B');
  $('body .buttons div').removeClass('active');
  $('body .buttons div:nth-child(B)').addClass('active');
});

$("body .buttons div:nth-child(3)").click(function() {
  $('body').removeClass('A B C D');
  $('body').addClass('C');
  $('body .buttons div').removeClass('active');
  $('body .buttons div:nth-child(C)').addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <div class="1">1</div>
  <div class="2">2</div>
  <div class="3">3</div>
</div>

jsfiddle: http://jsfiddle.net/sthvo31v/

Upvotes: 2

Views: 2687

Answers (7)

Manzur Khan
Manzur Khan

Reputation: 2486

Maybe a novice answer but will this work?

for(i=1; i <= 20; i++) {
    $("body  .buttons div:nth-child(i)").click(function() { 
    for(j=1; j <= 20; i++) $('body').removeClass(String.fromCharCode(63 + n));
    $('body').addClass(i);
    $('body .buttons div').removeClass('active');   
    $('body .buttons div:nth-child(String.fromCharCode(63 + n))').addClass('active');
}

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

I've looked through these answers and couldn't find the simplest solution i could think of

Simply, when click on any button, get it's class and add it to the body. Add class active to the clicked button and remove class active from others.

Simple and straight forward

See snippet below

var clickMe = $(".buttons div"),
  body = $("body")

clickMe.on("click", function() {
  body.removeClass()
  var butClass = $(this).attr("class")
  body.addClass(butClass)
  $(this).addClass("active")
  $(this).siblings("div").removeClass("active")
})
.buttons div {
  display: inline-block;
  padding: 20px;
  cursor: pointer;
  background: Red;
  margin: 5px;
  border-radius: 100%;
}

.buttons div.active {
  background: green;
}

body.A {
  background: blue;
}

body.B {
  background: yellow;
}

body.C {
  background: orange
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="buttons">
    <div class="A">1</div>
    <div class="B">2</div>
    <div class="C">3</div>
  </div>
</body>

Upvotes: 0

Abolfazl Imani
Abolfazl Imani

Reputation: 46

i was change your code:

html:

<body>
<div class="buttons"> 
<div class="1" data-class="A">1</div>
<div class="2" data-class="B">2</div>
<div class="3" data-class="C">3</div>
</div>
</body>

js:

$(".buttons div").click(function(){
    var activeClass = $(".buttons div.active").data("class");

  $(".buttons div").removeClass("active");
  $(this).addClass("active");

  $("body").removeClass(activeClass);
  $("body").addClass($(this).data("class"));
});

Upvotes: 3

Makarand Patil
Makarand Patil

Reputation: 1001

This should work for you. It will work for any number of buttons. Try it

$(".buttons div").click(function() {
  var divClass = $(this).attr('class');
  $('body').removeClass('1 2 3 D');
  $('body').addClass(divClass);
  $(this).siblings().removeClass('active');  
  $(this).addClass('active');
});

Upvotes: 0

fightinglion
fightinglion

Reputation: 39

You can also optimize the top part of Liam’s answer like bellow:

$("body  .buttons div").click(function() {
    // to get the num dynamically. 
    // It depends on your html. For example, you can add an order attribute to each button, order=1, order=2...
    var x = $(this).attr(‘order’);

    runActive(x);
});

Upvotes: 0

Olian04
Olian04

Reputation: 6872

You could achieve this with just ordinary js, like this:

function buttonClicked() {
  document.querySelectorAll('.myButton').forEach(button => {
    button.classList.remove('active');
  });
  
  this.classList.add('active');
}

document.querySelectorAll('.myButton').forEach(button => {
  button.onclick = buttonClicked;
});
.active {
  background-color: orangered;
}
<button class="myButton">1</button>
<button class="myButton">2</button>
<button class="myButton">3</button>
<button class="myButton">4</button>
<button class="myButton">5</button>
<button class="myButton">6</button>
<button class="myButton">7</button>
<button class="myButton">8</button>
<button class="myButton">9</button>
<button class="myButton">10</button>
<button class="myButton">11</button>
<button class="myButton">12</button>
<button class="myButton">13</button>
<button class="myButton">14</button>
<button class="myButton">15</button>
<button class="myButton">16</button>
<button class="myButton">17</button>
<button class="myButton">18</button>
<button class="myButton">19</button>
<button class="myButton">20</button>

There is no need for jquery, and its very fast.

Upvotes: 1

Liam
Liam

Reputation: 29714

The obvious optimisation is create a function of your click function as the only thing that changes is a single variable.

function runActive(x){
   $('body').removeClass('1 2 3 D');
   $('body').addClass(x);
    $('body .buttons div').removeClass('active');   
    $('body .buttons div:nth-child('+x+')').addClass('active');
}

$("body  .buttons div:nth-child(1)").click(function() {runActive('1');}); 
$("body  .buttons div:nth-child(2)").click(function() {runActive('2');}); 
$("body  .buttons div:nth-child(3)").click(function() {runActive('3');}); 
...etc.

Upvotes: 0

Related Questions