javascript - div 里面的 div，搞砸了

Question

我有一个“站点”，在这个站点中我有三个按钮，可以在 3 ...窗口(？)之间切换。这是通过隐藏 2 个同时保持 1 个可见的函数完成的。三个“窗口”是div。隐藏并使 div 可见的函数针对“id="wrapper"”的子项，它不应该针对 Wrappers 的孙子项，因此问题不应该在那里，但函数是唯一可能干扰的东西，据我所知。

三个 div 之一，里面有 div 没问题，但其他 div 不能包含 div，我不得不使用 <p>用于包含内容，但当我想将图像用作按钮等时，它就不起作用了。

我在过去一天检查了 html 几次，但我找不到任何问题，我会继续自己尝试，但我可能会在 1-3 天内失去互联网，我不想被“搁浅”。

我的三个“包装器”子级是“WindowTwo”、“WindowThree”和“container”类。如果将 div 放在 WindowTwo 和 WindowThree 中，您会注意到第一个按钮窗口变为空白。容器是可以毫无问题地在 div 中包含 div 的容器

http://codepen.io/anon/pen/WbjzWL

我知道我的代码很乱，而且我的喋喋不休更乱，对此深表歉意，并在此先感谢您的任何输入:)

function toggleDiv(target) {
  var div = document.getElementById('wrapper').getElementsByTagName("div");
  
  if (target == 1) {
    div[0].style.display = 'block';
    div[1].style.display = 'none';
    div[2].style.display = 'none';
  } else if (target == 2) {
    div[0].style.display = 'none';
    div[1].style.display = 'block';
    div[2].style.display = 'none';
  } else {
    div[0].style.display = 'none';
    div[1].style.display = 'none';
    div[2].style.display = 'block';
  }
};

.ButtonOveral {
  position: absolute;
  background-color: yellow;
  width: 90px;
  height: 45px;
  left: 4px;
  top: -15px;
}
.ButtonOveral2 {
  position: absolute;
  background-color: red;
  width: 90px;
  height: 45px;
  left: 4px;
  top: 40px;
}
.ButtonOveral3 {
  position: absolute;
  background-color: yellow;
  width: 90px;
  height: 45px;
  left: 4px;
  top: 100px;
}
.ButtonOveral4 {
  position: absolute;
  background-color: blue;
  width: 90px;
  height: 45px;
  left: 4px;
  top: 160px;
}
.ButtonOveral5 {
  position: absolute;
  background-color: purple;
  width: 90px;
  height: 45px;
  left: 4px;
  top: 220px;
}
.ButtonOveral6 {
  position: absolute;
  background-color: red;
  width: 90px;
  height: 45px;
  left: 4px;
  top: 280px;
}
.Red {
  position: absolute;
  background-color: red;
  width: 90px;
  height: 85px;
  left: 4px;
  top: 350px;
}
/*
pointer-events: none; // enables you to click through transparent divs
*/

img {
  pointer-events: none;
  position: absolute;
  z-index: 100;
  left: 34px;
  top: 562px;
  margin-top: -33px;
  margin-left: -33px;
}
.moneyHolder {
  position: relative;
  height: 50px;
  width: 810px;
  background-color: red;
  left: 83px;
  top: -8px;
}
#newpost {
  display: none;
  position: relative;
  left: 83px;
  top: -8px;
  width: 810px;
  height: 550px;
  background-color: green;
}
#SecondWindow {
  position: relative;
  left: 83px;
  top: -8px;
  width: 810px;
  height: 550px;
  background-color: hsla(359, 35%, 39%, 0.35);
}
#ThirdWindow {
  display: none;
  position: relative;
  left: 83px;
  top: -8px;
  width: 810px;
  height: 550px;
  background-color: blue;
}
.upgradeHolder {
  position: absolute;
  border: 1px solid blue;
  top: 0px;
  left: 0px;
  width: 90;
  height: 598;
  background-color: black;
}
.Lemon {
  width: 90px;
  height: 55px;
  background-color: #B93437;
  margin: 0px 0px 5px 0px;
}
.Lemon2 {
  width: 90px;
  height: 55px;
  background-color: purple;
  margin: 5px 0px 5px 0px;
}
.savebutton {
  width: 90px;
  height: 55px;
  background-color: pink;
  margin: 5px 0px 5px 0px;
}
#button,
#button2,
#button3 {
  display: inline-block;
  background: hsla(39, 100%, 50%, 0.59);
  width: 90px;
  height: 30px;
  margin: 0 0 20px;
}

<div class="moneyHolder">
  <h1 style="cursor:default"> Money: <span id="money">0</span></h1>
</div>
<div id="wrapper">

  <div class="WindowTwo" id="SecondWindow">
    <p class="ButtonOveral" onclick="ProtoType()" id="tooltip22">Price: <span id="RedId1">0</span> 
      </br>Bank: <span id="Reds1">0</span>
    </p>
  </div>


  <div class="WindowThree" id="ThirdWindow"></div>

  <div class="container" id="newpost" onclick="GatherMoney()">

    <div class="Lemon" onclick="Build(0);">Lemon: <span id="Building1Cost">0</span>
      </br>PerSec: <span id="Building1PerSec">1</span>
      </br>Quantity: <span id="Building1Qty">0</span> 
    </div>

    <div class="saveButton" style="cursor:default" onclick="save()">
      <h2>Save </h2>
    </div>
  </div>
  <!-- Below is "window" changer 
-->
</div>
<div class="upgradeHolder">
  <div id="button" onclick="toggleDiv(0)">one</div>
  <div id="button2" onclick="toggleDiv(1)">two</div>
  <div id="button3" onclick="toggleDiv(2)">Three</div>
</div>

Answer 1

不要为此使用 getElementsByTagName。它将选择作为 wrapper 后代的所有 div。使用 children 代替。 wrapper 中的所有元素都是“窗口”divs。因此，如果您使用它，它将按您的预期工作。

function toggleDiv(target){
  var div = document.getElementById('wrapper').children;
  if (target == 1) {
      div[0].style.display = 'block';
      div[1].style.display = 'none';
      div[2].style.display = 'none';
  } else if(target == 2) {
      div[0].style.display = 'none';
      div[1].style.display = 'block';
      div[2].style.display = 'none';
  }else{
      div[0].style.display = 'none';
      div[1].style.display = 'none';
      div[2].style.display = 'block';

  }

};

或者更好的解决方案:

var div = document.querySelectorAll("#wrapper > div");

这仅选择 wrapper 或 div 类型的直接后代(子代)。