javascript - 从一组按钮转移到另一组按钮

Question

我正在尝试将一组按钮更改为其他按钮。它更改为哪些按钮取决于所选的按钮。

• 按钮 1: 单击时，两个按钮都将替换为按钮:Button1a 和 Button1b

• 按钮 2: 单击时，两个按钮都将替换为按钮:Button2a 和 Button2b

到目前为止我得到了:

<div class="buttons">
  <div class="buttons1-2">
    <button type="button" class="btn btn1">Button 1</button>
    <button type="button" class="btn btn2">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button type="button" class="btn btn1a">Button 1a</button>
    <button type="button" class="btn btn1b">Button 1b</button>
  </div>    
  <div class="button2a-b">
    <button type="button" class="btn btn2a">Button 2a</button>
    <button type="button" class="btn btn2b">Button 2b</button>
  </div>    
</div>

我隐藏了 1a-b 和 2a-b 按钮:

.button1a-b {
    display: none;
}
.button2-b {
    display: none;
}

但我正在努力为此创建 JavaScript 代码。 有人可以帮助我如何用 JavaScript 编写代码吗？另外，如果有更好的方法为此编写我的 HTML/CSS，请告诉我。

Answer 1

这是一个如何使用 onClick()

完成的示例

function buttonPushed(btn) {
  var replacewith = "buttons1a-b";
  if (btn.id == "btn2") {
    replacewith = "buttons2a-b";
  }

  var allChildren = document.getElementsByClassName('buttons')[0].children;
  for (var i = 0; i < allChildren.length; i++) {
    var child = allChildren[i];
    if (child.className != replacewith) {
      child.style.display = "none";
    } else {
      child.style.display = "inline";
    }
  }

}

.buttons1a-b {
  display: none;
}

.button2a-b {
  display: none;
}

<div class="buttons">
  <div class="buttons1-2">
    <button id="btn1" class="btn btn1" onclick="buttonPushed(this)">Button 1</button>
    <button id="btn2" class="btn btn2" onclick="buttonPushed(this)">Button 2</button>
  </div>
  <div class="buttons1a-b">
    <button class="btn btn1a">Button 1a</button>
    <button class="btn btn1b">Button 1b</button>
  </div>
  <div class="button2a-b">
    <button class="btn btn2a">Button 2a</button>
    <button class="btn btn2b">Button 2b</button>
  </div>
</div>