Click and remove/add multiple Classes with multiple Buttons
Question
I have some buttons:
When users click on button I need 3 actions:
The button that users clicked get class
activeand others are removed.Remove a list of class in body.
- Add the name of button as class to body.
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('ABC 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('ABC 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('ABC 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/
7 answers
solution1
2 ACCPTED 2017-11-01 13:47:01
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"));
});
solution2
0 2017-11-01 13:21:28
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.
solution3
0 2017-11-01 13:26:52
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');
});
solution4
0 2017-11-01 13:28:07
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.
solution5
0 2017-11-01 13:28:59
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');
}
solution6
0 2017-11-01 13:37:28
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);
});
solution7
0 2017-11-01 14:08:40
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.