Question

我有一些按钮：

当用户点击按钮时，我需要3个动作：

用户点击的按钮获取了课程[{'VLan': 'Vlan1', 'Interface': 'Fa0/0', 'State': 'Up'}, {'VLan': 'Vlan3', 'Interface': 'Fa0/3', 'State': 'Up'}]，其他按钮被移除。
删除正文中的课程列表。
将按钮名称作为类添加到正文中。

下面的代码工作正常。但我有20个按钮。这将是一个很大的代码。所以我的问题是：有一种方法可以简化我需要做的事情吗？

我在stackoverflow上看到了其他问题，但我找不到我要找的东西。

＆＃13;

active

＆＃13;

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

＆＃13;

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

Answer 1

我改变了你的代码：

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

Answer 2

明显的优化是创建click函数的函数，因为唯一改变的是单个变量。

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.

Answer 3

这对你有用。它适用于任意数量的按钮。试试吧

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

Answer 4

你可以用普通的js实现这一点，比如：

＆＃13;

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

＆＃13;

.active {
  background-color: orangered;
}

＆＃13;

<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>

＆＃13;

不需要jquery，而且速度非常快。

Answer 5

也许是一个新手的答案，但这会有效吗？

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');
}

Answer 6

您还可以优化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);
});

Answer 7

我查看了这些答案，找不到我能想到的最简单的解决方案

简单地说，当点击任何按钮时，获取它的类并将其添加到正文中。将类激活添加到单击的按钮，并从其他人中删除活动类。

简单直接

请参阅下面的代码段

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>

单击并删除/添加具有多个按钮的多个类

7 个答案: