Javascript 单击并使用多个按钮删除/添加多个类_Javascript_Jquery

Javascript 单击并使用多个按钮删除/添加多个类

javascript jquery

Javascript 单击并使用多个按钮删除/添加多个类,javascript,jquery,Javascript,Jquery,我有一些按钮：当用户单击按钮时，我需要3个操作：用户单击的“获取类活动”按钮和其他按钮将被删除删除正文中的类列表将button的名称作为类添加到正文中下面的代码运行良好。但我有20个按钮。这将是一个巨大的代码。所以我的问题是：有一种方法可以简化我需要做的事情吗我在stackoverflow上看到了其他问题，但我没有找到我想要的 $（“body.buttons div:nth child（1）”。单击（function（）{ $（'body'）.removeClass（'ab

我有一些按钮：

当用户单击按钮时，我需要3个操作：

用户单击的“获取类

活动”按钮和其他按钮将被删除


删除正文中的类列表
将button的名称作为类添加到正文中


下面的代码运行良好。但我有20个按钮。这将是一个巨大的代码。
所以我的问题是：有一种方法可以简化我需要做的事情吗
我在stackoverflow上看到了其他问题，但我没有找到我想要的

$（“body.buttons div:nth child（1）”。单击（function（）{
$（'body'）.removeClass（'abccd'）；
$（'body'）.addClass（'A'）；
$（'body.buttons div'）。removeClass（'active'）；
$（'body.buttons div:nth child（A）'）.addClass（'active'）；
});
$（“body.buttons div:nth child（2）”。单击（function（）{
$（'body'）.removeClass（'abccd'）；
$（'body'）.addClass（'B'）；
$（'body.buttons div'）。removeClass（'active'）；
$（'body.buttons div:nth child（B）'）.addClass（'active'）；
});
$（“body.buttons div:nth child（3）”。单击（function（）{
$（'body'）.removeClass（'abccd'）；
$（'body'）.addClass（'C'）；
$（'body.buttons div'）。removeClass（'active'）；
$（'body.buttons div:nth child（C）'）.addClass（'active'）；
});

1.
2.
3.
最明显的优化是创建一个单击函数，因为唯一改变的是单个变量
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.

这应该对你有用。它适用于任何数量的按钮。试试看
$(".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');
}); 

您可以通过普通js实现这一点，如下所示：

功能按钮点击（）{
document.querySelectorAll（'.myButton'）.forEach（button=>{
button.classList.remove（'active'）；
});
this.classList.add（'active'）；
}
document.querySelectorAll（'.myButton'）.forEach（button=>{
button.onclick=按钮单击；
});
.active{
背景颜色：橙色；
}
1
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
也许是一个新手的答案，但这行得通吗
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');
}

对于（i=1；i您还可以优化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);
}); 

我正在更改您的代码：
html:
我看了这些答案，找不到我能想到的最简单的解决办法
简单地说，当单击任何按钮时，获取其类并将其添加到正文中。将类活动添加到单击的按钮中，并从其他按钮中删除类活动
简明扼要
请参阅下面的代码片段

var clickMe=$（“.buttons div”），
正文=$（“正文”）
clickMe.on（“单击”，函数（）{
body.removeClass（）
var butClass=$（this.attr（“类”）
body.addClass（butClass）
$（此）.addClass（“活动”）
$（this.sillides（“div”）.removeClass（“active”）
})
.buttons div{
显示：内联块；
填充：20px；
光标：指针；
背景：红色；
保证金：5px；
边界半径：100%；
}
.按钮分区激活{
背景：绿色；
}
身体A{
背景：蓝色；
}
正文B{
背景：黄色；
}
正文.C{
背景：橙色
}

1.
2.
3.
请向我们展示所有相关代码。我做了。这只是一个示例。一组按钮的HTML代码也会很有用。好的。我会更新问题。调用类1似乎有点短视完美！它只更改了所选的类。效果非常好。谢谢！！！
<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>

$(".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"));
});