Question

我有一个“网站”，在这个网站上我有三个按钮在3 ...窗口之间切换（？）。这是通过隐藏2同时保持一个可见的功能来完成的。三个“窗口”是div。隐藏和使div可见的功能目标是“id =”包装器“”的子项，它不应该针对Wrappers大孩子，因此问题不应该在那里，但功能是唯一可以干扰的东西，据我所知。

三个div之一，里面有div没有问题，但是其他div不能包含div，我不得不使用<p>来包含东西，但这不起作用好吧，当我想用图像作为按钮等时。

我在过去的几天里已经多次查看了html，但我找不到任何问题，我会继续自己尝试，但我可能会在1-3天内失去我的互联网而且我不想要被“搁浅”。

我的三个“包装”孩子是“WindowTwo”，“WindowThree”和“容器”。如果你在WindowTwo和WindowThree中放置一个div，你会发现第一个按钮窗口变成空白。容器是可以在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。它将选择div的后代的所有wrapper。请改用children。 wrapper中的所有元素都是“window” 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或[{1}}类型的直接后代（子项）。

Answer 2

演示：http://jsfiddle.net/robschmuecker/g1x18owL/

您的选择器错误，因为它包含divs

中包含的所有wrapper

将其更改为children以仅接收wrapper div的直接后代，并修改您的if语句。

即

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

    }

}

Div里面的div，搞砸了

2 个答案: