Question

我想出了一个不是很好的解决方案，因为它在div中显示了7个按钮和信息。但是，我希望在单击新按钮时关闭div。而且我的解决方法是非常重复。

javascript代码...冗长的解决方案，用于通过每个按钮访问每个div ...单独工作

function myRoot() {
  var x = document.getElementById("root");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function mySacral() {
  var x = document.getElementById("sacral");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function mySolar() {
  var x = document.getElementById("solar");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myHeart() {
  var x = document.getElementById("heart");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myThroat() {
  var x = document.getElementById("throat");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myBrow() {
  var x = document.getElementById("brow");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myCrown() {
  var x = document.getElementById("crown");
  if (x.style.display !== "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<script src="Myscript.js"></script>
<div class="chakra">
  <button class="chbtn" onclick="myRoot()"><img src="Images/root.png"></button>
</div>
<div class="chakra">
  <button class="chbtn" onclick="mySacral()"><img src="Images/sacral.png"></button>
</div>
<div class="chakra">
  <button class="chbtn" onclick="mySolar()"><img src="Images/solar.png"></button>
</div>
<div class="chakra">
  <button class="chbtn" onclick="myHeart()"><img src="Images/heart.png"></button>
</div>
<div class="chakra">
  <button class="chbtn" onclick="myThroat()"><img src="Images/throat.png"></button>
</div>
<div class="chakra">
  <button class="chbtn" onclick="myBrow()"><img src="Images/brow.png"></button>
</div>
<div class="chakra">
  <button class="chbtn" onclick="myCrown()"><img src="Images/crown.png"></button>
</div>
</div>

<div class="pic-holder">
  <h3>Chakra information</h3>

  <div class="info" id="root"><img src="Images/root.png"> The root Chakra</br>
    <p>Lorem </p>
    <p>Lorem ipsum, dolor sit </p>
  </div>
  <div class="info" id="sacral"><img src="Images/sacral.png"> The sacral Chakra</br>
    <p>Lorem blah blahipsum blah blah</p>
  </div>

Answer 1

所以..这是一个简单的代码，用一个小的css部分显示了如何进行操作

var
  Elm_Id_Block = '',
  elms_xx = document.querySelectorAll('#elmsGroup > div')
;

// init 
elms_xx[0].style.display = "block";
Elm_Id_Block = elms_xx[0].id;


document.querySelector("#buttonsGroup").onclick = function (e) {

  if (!e.target.matches('button')) return;
  e.stopPropagation();
  let ref = e.target.dataset.ref;

  if (ref != Elm_Id_Block) {
    document.getElementById(ref).style.display = "block";
    document.getElementById(Elm_Id_Block).style.display = "none";
    Elm_Id_Block = ref;
  }
}

    #elmsGroup>div {
      display: none;
      width: 300px;
      height: 30px;
      padding: 5px;
      border: 1px solid lightblue;
      margin: 5px;
    }

<div id="buttonsGroup">
  <button data-ref="elm-A">A</button>
  <button data-ref="elm-B">B</button>
  <button data-ref="elm-C">C</button>
  <button data-ref="elm-D">D</button>
  <button data-ref="elm-E">E</button>
</div>

<div id="elmsGroup">
  <div id="elm-A"> elm-A </div>
  <div id="elm-B"> elm-B </div>
  <div id="elm-C"> elm-C </div>
  <div id="elm-D"> elm-D </div>
  <div id="elm-E"> elm-E </div>
</div>

如何仅使活动按钮保持打开状态？

1 个答案: