javascript - 仅单击一个按钮即可隐藏/显示元素

Question

我知道代码运行良好，但我真正想要的是使带有文本“隐藏”的按钮将该文本更改为“显示”，但只有在我单击带有文本“隐藏”的按钮之后才会发生我单击该按钮，文本内容隐藏，只有它仍然是带有文本“显示”的按钮，当我单击显示时，我希望代码再次显示。

window.onload = function() {

  var listItems = document.querySelectorAll("#myList li");

  for (var i = 0; i < listItems.length; i++) {
    var item = listItems[i];

    item.querySelector(".hide").onclick = function(e) {
      var img = e.target.parentNode.querySelector("img"),
        header = e.target.parentNode.querySelector("h3"),
        elemA = e.target.parentNode.querySelector("a"),
        elemP = e.target.parentNode.querySelector("p"),
        span = e.target.parentNode.querySelector("span");

      img.style.display = "none";
      header.style.display = "none";
      elemA.style.display = "none";
      elemP.style.display = "none";
      span.style.display = "none";
    };
  }
};

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a href="https://www.youtube.com/watch?v=GCFR26D5ofA" class="name" target="_blank">BOOM AND DOOM</a>
				</h3>
      <p>
        By: Zerkaa
      </p>
      <span>
					129,702 views - 2 months ago 
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3> 
				<a href="https://www.youtube.com/watch?v=yw3tTTIZyf4" class="name" target="_blank">CLOWN DEATH RUN</a>
				</h3>
      <p>
        By: KSI
      </p>
      <span>
					176,977 - 3 months ago
				</span>
      <button class="hide clicked" onclick="showhide()">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3> 
					<a href="https://www.youtube.com/watch?v=0EXLxuosFAc" class="name" target="_blank">BREACH WALL ADVENTURE</a>
				</h3>
      <p>
        By: MM7GAMES
      </p>
      <span>
					135,782 - 4 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a  href="https://www.youtube.com/watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" class="name" target"=_blank">FINISH LINE TUNNEL</a>
				</h3>
      <p>
        By: W2S
      </p>
      <span>
					104,169 views 5 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
    <li>
      <img class="img" src="gta.jpg" width="250" height="250">
      <h3>
					<a href="https://www.youtube.com/watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" class="name" target="_blank">INSANE MOUNTAIN RAMP</a>
				</h3>
      <p>
        By: TBJZL
      </p>
      <span>
					181,137 views 6 months ago
				</span>
      <button class="hide clicked">Hide</button>
    </li>
  </ul>
</div>

Answer 1

我知道你想要什么。您希望内容相应地隐藏或显示，并且按钮的文本相应地“隐藏”或“显示”。我对吗？如果是，那么我已经创建了一个 JSFiddle，检查它，它正在工作 -
http://jsfiddle.net/g6kjrc08/