单击并删除/添加具有多个按钮的多个类
[英]Click and remove/add multiple Classes with multiple Buttons
问题描述
I have some buttons:
我有一些按钮：
When users click on button I need 3 actions:当用户单击按钮时，我需要 3 个操作：
The button that users clicked get class
activeand others are removed.用户单击的按钮使类active，其他按钮被删除。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.但我有 20 个按钮。 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.我在stackoverflow上看到了其他问题，但我没有找到我要找的东西。
$("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/ jsfiddle： http : //jsfiddle.net/sthvo31v/
7 个解决方案
解决方案1
2 已采纳 2017-11-01 13:47:01
i was change your code:我正在更改您的代码：
html: 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: 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"));
});
解决方案2
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.
解决方案3
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');
});
解决方案4
0 2017-11-01 13:28:07
You could achieve this with just ordinary js, like this:你可以用普通的 js 来实现这一点，如下所示：
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.不需要jquery，而且速度非常快。
解决方案5
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');
}
解决方案6
0 2017-11-01 13:37:28
You can also optimize the top part of Liam's answer like bellow:您还可以优化 Liam 的回答的顶部，如下所示：
$("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);
});
解决方案7
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.