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

Question

我有一组按钮，其中 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>

Answer 1

您的问题不清楚，这个答案好吗？

这是关于 JS 事件委托(delegate)的，
您还应该使用classList.toggle()，它允许直接包含测试

const DivAllButtons = document.getElementById('All-buttons')

DivAllButtons.onclick = ({target : clicked_Element }) =>
  {
  if (!clicked_Element.matches('button.btn')) return

  clicked_Element.parentNode
  .querySelectorAll('button.btn')
  .forEach( bt =>
    {
    bt.classList.toggle( 'active', bt===clicked_Element ) 
    }); 
  }

#All-buttons > div { 
  margin: 1em; 
  }
.btn {
  border           : none;
  outline          : none;
  padding          : 10px 16px;
  background-color : #f1f1f1;
  cursor           : pointer;
  font-size        : 18px;
  }
.active, 
.btn:hover {
  background-color : #666;
  color            : white;
  }

<div id="All-buttons">
  <div>
    <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>

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

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

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

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

</div>