javascript - 按下按钮时功能无法正常工作

Question

我希望按钮在根据其 id 按下相应按钮时显示某些文本 block 。

根据 css 文件，按钮通过 fadein 动画按下时呈现。 "display:none;" 用于使文本保持隐藏状态，直到按下按钮。 css 工作正常，但 Javascript 函数功能失调。

function nextA() {
  var x = document.getElementById("partA");
  x.style.display = "block";
}

function nextS() {
  var x = document.getElementById("partS");
  x.style.display = "block";
}

function nextD() {
  var x = document.getElementById("partD");
  x.style.display = "block";
}

function nextB() {
  var x = document.getElementById("partB");
  x.style.display = "block";
}

.text {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 4.5s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#partA {
  display: none;
}

#partS {
  display: none;
}

#partD {
  display: none;
}

#partB {
  display: none;
}

<div class="place" id="part7">
  <p class="text">text</p>
  <button class="button2 text" onclick="nextA()">A</button>
  <button class="button2 text" onclick="nextS()">S</button>
  <button class="button2 text" onclick="nextD()">D</button>
  <button class="button2 text" onclick="nextB()">B</button>
</div>
<div class="place" id="partA">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
  <div class="place" id="partS">
    <p class="text">TEXT</p>
    <form>
      <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
    </form>
    <div class="place" id="partD">
      <p class="text">TEXT</p>
      <form>
        <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
      </form>
      <div class="place" id="partB">
        <p class="text">TEXT</p>
        <form>
          <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
        </form>
      </div>

我希望，例如，按下按钮 A，出现 id 为 partA 的文本 block ，并且不会出现其他文本 block 。实际发生的是 nextA 呈现所有文本 block ，而函数 nextS、nextD、 和 nextB 甚至不加载。

Answer 1

问题是你的元素S , D和 B都是A的 child ; S是 child ，D是孙子，B是曾孙。因此，除非 A，否则无法看到它们也可见。切换 A 的可见性后，您也会自动显示所有子项。

要更正此问题，只需添加四个 </div>关闭你的.place元素，使它们成为彼此的所有 sibling ，而不是拥有三个 A 的后代.

这可以从以下方面看出:

function nextA() {
  var x = document.getElementById("partA");
  x.style.display = "block";
}

function nextS() {
  var x = document.getElementById("partS");
  x.style.display = "block";
}

function nextD() {
  var x = document.getElementById("partD");
  x.style.display = "block";
}

function nextB() {
  var x = document.getElementById("partB");
  x.style.display = "block";
}

.text {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 4.5s;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#partA {
  display: none;
}

#partS {
  display: none;
}

#partD {
  display: none;
}

#partB {
  display: none;
}

<div class="place" id="part7">
  <p class="text">text</p>
  <button class="button2 text" onclick="nextA()">A</button>
  <button class="button2 text" onclick="nextS()">S</button>
  <button class="button2 text" onclick="nextD()">D</button>
  <button class="button2 text" onclick="nextB()">B</button>
</div>
<div class="place" id="partA">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>
<div class="place" id="partS">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>
<div class="place" id="partD">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>
<div class="place" id="partB">
  <p class="text">TEXT</p>
  <form>
    <input class="text button2 place" type="button" value="" onclick="window.location.href=''" />
  </form>
</div>

注意:您还需要通过添加事件处理程序(代替 onclick )来使用不显眼的 JavaScript，尽管这是对问题中演示的问题的补充。