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

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

Answer 2

尝试使用一点CSS让您的生活更轻松。

＆＃13;

window.addEventListener("load", function () {

  var listItems = document.querySelectorAll("#myList > li");

  Array.prototype.forEach.call(listItems, function (item) {
    item.querySelector(".hide").addEventListener("click", function () {
      item.classList.toggle("hidden");

      if (this.textContent === "Hide") {
        this.textContent = "Show";
      } else {
        this.textContent = "Hide";
      }
    });
  });
});

＆＃13;

.hidden :not(.hide) {
  display: none;
}

＆＃13;

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=GCFR26D5ofA" 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" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=yw3tTTIZyf4" target="_blank">CLOWN DEATH RUN</a></h3>

      <p>By: KSI</p><span>176,977 - 3 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=0EXLxuosFAc" 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" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" 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" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" 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>

＆＃13;

或者如果您只想使用JavaScript：

＆＃13;

window.addEventListener("load", function () {

  var listItems = document.querySelectorAll("#myList > li");

  Array.prototype.forEach.call(listItems, function (item) {
    var descendants = item.querySelectorAll(":not(.hide)");

    item.querySelector(".hide").addEventListener("click", function () {
      Array.prototype.forEach.call(descendants, function (descendant) {
        if (descendant.style.display === "none") {
          descendant.style.display = "";
        } else {
          descendant.style.display = "none";
        }
      });

      if (this.textContent === "Hide") {
        this.textContent = "Show";
      } else {
        this.textContent = "Hide";
      }
    });
  });
});

＆＃13;

<div id="container">
  <ul id="myList">
    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=GCFR26D5ofA" 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" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=yw3tTTIZyf4" target="_blank">CLOWN DEATH RUN</a></h3>

      <p>By: KSI</p><span>176,977 - 3 months ago</span> <button class="hide clicked">Hide</button>
    </li>

    <li>
      <img class="img" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=0EXLxuosFAc" 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" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=jBjknMuFt7A&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=3" 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" height="250" src="gta.jpg" width="250">

      <h3><a class="name" href="https://www.youtube.com/watch?v=ukxhgumzKG4&list=PLu1nstonJHbQGN0kQJ-UFrMDc9fwMpeIS&index=7" 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>

＆＃13;

Answer 3

看一下这段代码，它更易于维护，模块化，紧凑......

http://jsfiddle.net/techsin/shcr2w4s/

var $ul = $('.projectLists > ul');
years = {};

$ul.each(function(){
 years[$(this).data('year')] = '';
});

for (year in years) {
 $ul.filter('[data-year='+ year +']').wrapAll('<div class="year"></div');
 }

 var alphabeticallyOrderedDivs = $('ul').sort(function(a, b) {
        return String.prototype.localeCompare.call($(a).data('year').toLowerCase(),    $(b).data('year').toLowerCase());
    });

 var container = $(".projectLists");
 container.detach().empty().append(alphabeticallyOrderedDivs);
 $('body').append(container);

还注意到html结构的变化，最好隐藏一个元素而不是隐藏每个元素。它不仅容易出错，而且并非所有元素都可以通过display：block返回到原始状态，因为有些可能是内联块，表格，内联等。

如果你使用了jquery，那么就可以这样做了

http://jsfiddle.net/techsin/shcr2w4s/1/

var btns = toArray(document.getElementsByClassName('hide'));

btns.forEach(function (x) {
    var ele = x.parentElement.querySelector('.cont');
    var style = ['block','none'],
        text = ['Hide', 'Show'],
        n = 0;
    x.addEventListener('click', function (e) {
        n = (n==1)?0:1;
        x.innerText = text[n];
        ele.style.display = style[n];
    });

});


function toArray(x) {
    var arr = [];
    for (var i = 0; i < x.length; i++) arr.push(x[i]);
    return arr;
}

Answer 4

对于更改文字，为什么不使用Inner.html？

喜欢将this.innerHTML = 'Show';放入item.querySelector(".hide").onclick函数

或者让Jquery使用.html（）

Answer 5

我会将“隐藏”属性（即<p hidden = 'true'></p>）添加到要切换隐藏或可见的元素，然后使用element.setAttribute("hidden", true);隐藏元素并使用值'false'再次显示该元素。我会为show和hide创建一个函数，这样你就可以在你的.onclicks中调用这个函数来让你的生活更简单。

Answer 6

我想你想要这样的东西。

＆＃13;

$('#toggle-Button').on('click', function(){
  if( $(this).val() == 'show' )
    $(this).val('hide');
  else
    $(this).val('show');
  
  $('#some-div').toggle();
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="toggle-Button" type="button" value="hide" />

<div id="some-div">
  some text
</div>

＆＃13;

Answer 7

试试这个js代码

var listItems = document.querySelectorAll（＆＃34; #myList li＆＃34;）;

for（var i = 0; i＆lt; listItems.length; i ++）{ var item = listItems [i];

item.querySelector(".hide").onclick = function (e) {
    if(this.innerText == "Hide"){
        this.innerText="Show";
    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";
    }
    else{
        this.innerText="Hide";
    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 = "inline";
    header.style.display = "block";
    elemA.style.display = "block";
    elemP.style.display = "block";
    span.style.display = "inline";
    }
};

}

单击一个按钮隐藏/显示元素

7 个答案:

如果你使用了jquery，那么就可以这样做了