單擊並刪除/添加具有多個按鈕的多個類
[英]Click and remove/add multiple Classes with multiple Buttons
問題描述
我有一些按鈕：
當用戶單擊按鈕時，我需要 3 個操作：
用戶單擊的按鈕使類
active，其他按鈕被刪除。刪除正文中的類列表。
- 將按鈕的名稱作為類添加到正文。
下面的代碼工作正常。 但我有 20 個按鈕。 並且將是一個大代碼。 所以我的問題是：有沒有辦法簡化我需要做的事情？
我在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/
7 個解決方案
解決方案1
2 已采納 2017-11-01 13:47:01
我正在更改您的代碼：
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"));
});
解決方案2
0 2017-11-01 13:21:28
明顯的優化是為您的點擊函數創建一個函數，因為唯一改變的是單個變量。
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
這應該對你有用。 它適用於任意數量的按鈕。 嘗試一下
$(".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
你可以用普通的 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>
不需要jquery，而且速度非常快。
解決方案5
0 2017-11-01 13:28:59
也許是新手答案，但這行得通嗎？
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
您還可以優化 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
我已經瀏覽了這些答案，但找不到我能想到的最簡單的解決方案
簡單地說，當單擊任何按鈕時，獲取它的類並將其添加到正文中。 將活動類添加到單擊的按鈕並從其他人中刪除活動類。
簡單直接
見下面的片段
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>
創建一個按鈕以將多個類添加到多個按鈕並在單擊重置時將其刪除
[英]Creating a button to add multiple classes to multiple buttons and remove them when clicking on reset
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.