时间戳

首页 > 解决方案 > 显示多组按钮的当前按钮

javascript - 显示多组按钮的当前按钮

问题描述

我有一组按钮，其中js代码选择了当前按钮以不同方式显示它。

我想做的是有两组按钮，我可以在其中独立地与不同组中的按钮进行交互。

就像在第一组上选择按钮“1”，在第二组上选择“2”一样。在一个完美的世界里，我希望只有一个函数js可以用于不同的集合。我不知道该怎么做。

我的一组按钮是这样的：

// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

标签： javascriptphp

解决方案

你的问题不清楚你想要什么，但我想这就是你想要的，我在下面的代码片段中添加了另一个按钮，我改变了一些东西：

  1. 删除基于 ID 的选择器，并将其替换为类名的选择document.querySelectorAll(".button-set")器querySelectorAll()
  2. 遍历按钮集（我的代码片段中的 2 个元素），并将active类按钮的选择器更改为当前 div id，因为它是唯一的，并且允许我们定位特定的集。
  3. 为 div 组或集合添加唯一ID值。

var sets = document.querySelectorAll(".button-set");

sets.forEach((el, i) => {
  btns = el.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      var button = document.querySelector(`#${el.id} .active`);
      button.className = button.className.replace(" active", "");
      this.className += " active";
    });
  }
});
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
<div id="myDIV" class="button-set">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>
<br />
<div id="myDIV2" class="button-set">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

推荐阅读