时间戳

首页 > 解决方案 > 从一组按钮转移到另一组按钮

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

问题描述

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

到目前为止，我得到了：

<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，请告诉我。

标签： javascripthtmlcss

解决方案

这是一个如何使用的示例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>

推荐阅读