Question

有没有更动态的方式来隐藏/显示结构相同但没有标识符的div？点击显示我有东西

<div id="rules">
  <h3>The game's rules!</h3>
</div>
<div id="begin">
  <a href="#" class="link">Begin</a>
</div>

http://jsfiddle.net/ba7yfmz6/29/

Answer 1

使用this：

<div class="setup" onclick="show(this)">

JavaScript：

function show(elem) {
    var paragraph = elem.querySelector(".hidden");
    if (paragraph.style.display == "none") {
        paragraph.style.display = "block";
    } else {
        paragraph.style.display = "none";
}

希望这会有所帮助！

Answer 2

是的，有办法！

您可以获取所有元素，并通过forEach对其进行迭代，然后将函数分配给它们的onclick属性：

document.querySelectorAll('.setup').forEach(div => {
    div.onclick = showElem;
});

这样做，您可以摆脱HTML元素上的onlick。

要获取其子元素（显然是要隐藏/显示的子元素），您的show()函数应如下所示：

function show() {
    const hidden = this.getElementsByClassName('hidden')[0];
    if (hidden.style.display == 'none') {
    hidden.style.display = 'block';
  } else {
    hidden.style.display = 'none';
  }
}

一起：

document.querySelectorAll('.setup').forEach(div => {
	div.onclick = show;
});

function show() {
	const hidden = this.getElementsByClassName('hidden')[0];
	if (hidden.style.display == 'none') {
  	hidden.style.display = 'block';
  } else {
  	hidden.style.display = 'none';
  }
}

.setup {
  border-top: solid #ccc 3px;
  border-bottom: solid #ccc 3px;
  margin-bottom: 5%;
}

.setup:hover {
    cursor: pointer;
}

.hidden {
  text-align: center;
  font-weight: bold;
  border-top: solid black 3px;
  border-bottom: solid black 3px;
  background-color: yellow;
  display: none;
}

<div class="setup">
Click to show
  <p class="hidden">
    I'm some stuff
  </p>
</div>

<div class="setup">
Click to show
  <p class="hidden">
    I'm more stuff
  </p>
</div>

JS小提琴：http://jsfiddle.net/ba7yfmz6/38/

更多信息：

forEach

querySelectorAll()

Answer 3

您可以使用this。

此外，由于div没有style属性，因此在第一次点击时检查style.display === 'none'总是错误的；它将style.display设置为none。检查计算的样式会在第一次单击时显示隐藏的元素。

function show(el) {
  const toggle = el.querySelector('.hidden');
  
  toggle.style.display = window.getComputedStyle(toggle).display === 'none' ? 'block' : 'none';
}

.setup {
  border-top: solid #ccc 3px;
  border-bottom: solid #ccc 3px;
  margin-bottom: 5%;
}

.setup:hover {
    cursor: pointer;
}

.hidden {
  text-align: center;
  font-weight: bold;
  border-top: solid black 3px;
  border-bottom: solid black 3px;
  background-color: yellow;
  display: none;
}

<div class="setup" onclick="show(this)">
Click to show
  <p class="hidden">
    I'm some stuff
  </p>
</div>

<div class="setup" onclick="show(this)">
Click to show
  <p class="hidden">
    I'm more stuff
  </p>
</div>

Answer 4

<div class="setup" onclick="show(this)">

然后使用JavaScript：

function show(that) {   
    var hiddenElements = that.getElementsByClassName('hidden');
    for (var i = 0; i < hiddenElements.length; i++) {
        var style = hiddenElements[i].style;
        style.display = style.display == "block" ? "none" : "block";
    }
}

隐藏divs香草JavaScript的动态方式

4 个答案: