Динамический способ скрыть divs vanilla javascript

Question

Есть ли более динамичный способ скрывать / показывать div, идентичные по структуре без идентификаторов?Нажмите, чтобы показать, что я кое-что

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


function show(elem) {   
  var p = document.getElementsByClassName("hidden");
  if (p[elem] != undefined) {
    if (p[elem].style.display == "none") {
        p[elem].style.display = "block";
    } else {
      p[elem].style.display = "none";
    }
  }
}

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

Answer 1

<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";
    }
}

Answer 2

Да, есть способ!

Вы можете получить все свои элементы, выполнить их итерацию через forEach и назначить свою функцию их onclick свойству:

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

Выполнениеэто, вы можете избавиться от onlick в ваших HTML-элементах.

---

Чтобы получить их дочерний элемент (тот, который вы хотите скрыть / показать, очевидно), ваша функция 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 Fiddle: http://jsfiddle.net/ba7yfmz6/38/

---

Дополнительная информация:

forEach

querySelectorAll()

Answer 3

Вы можете использовать this.

Кроме того, поскольку div не имеет атрибута style, проверка на style.display === 'none' всегда будет ложной при первом щелчке;это установило бы style.display в ноль.Проверка на вычисленный стиль покажет скрытый элемент при первом нажатии.

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

Использование 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";
}

Надеюсь, это поможет!