Отображение объекта при нажатии

Question

не могу понять в чём проблема, хочу чтобы при нажатии объект с классом 'hidden' отображался на странице.

var x=  document.getElementsByClassName("hidden");
 for(var i=0; i<x.length;i++){
   x[i].style.display="none"
 }
var y=document.getElementsByClassName('show-all');
for(var j=0; j<y.length;j++){
  y[j].addEventListener("click", function(){
  x[j].style.display="block"
  })
}

.show-all{
cursor:pointer;
}

<div>
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li class='hidden'>Lorem</li>
<li class='hidden'>Lorem</li>
<li class='hidden'>Lorem</li>
</ul>
<p class='show-all'>show</p>
</div>
<div>
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li class='hidden'>Lorem</li>
<li class='hidden'>Lorem</li>
</ul>
<p class='show-all'>show</p>
</div>
<div>
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li class='hidden'>Lorem</li>
</ul>
<p class='show-all'>show</p>
</div>

score 2 · Answer 1 · 2019-01-22T20:41:10.107

2

var x = document.getElementsByClassName("hidden");
for (var i = 0; i < x.length; i++) {
  x[i].style.display = "none"
}
var y = document.getElementsByClassName('show-all');
for (var j = 0; j < y.length; j++) {
  y[j].addEventListener("click", function() {
    this.closest("div").querySelectorAll(".hidden").forEach(item => item.style.display = "");
  })
}

.show-all {
  cursor: pointer;
}

<div>
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
&lt;li class='hidden'&gt;Lorem&lt;/li&gt;
&lt;li class='hidden'&gt;Lorem&lt;/li&gt;
&lt;li class='hidden'&gt;Lorem&lt;/li&gt;


</ul>
  <p class='show-all'>show</p>
</div>
<div>
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class='hidden'>Lorem</li>
    <li class='hidden'>Lorem</li>
</ul>
  <p class='show-all'>show</p>
</div>
<div>
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class='hidden'>Lorem</li>
</ul>
  <p class='show-all'>show</p>
</div>

this.closest("div").querySelectorAll(".hidden").forEach(item => item.style.display = "");

this - от элемента, на котором произошло событие

.closest("div") - поднимаемся к ближайшему родителю типа div

querySelectorAll(".hidden") - в котором находим все элементы с классом hidden

каждому из которых очищаем style.display

edited Jan 22 '19 at 20:41

answered Jan 22 '19 at 19:49

this.closest("div").querySelectorAll(".hidden").forEach(item => item.style.display = ""); Можете пожалуйста объяснить эту строку @Igor – Asking Jan 22 '19 at 20:37
в этом случае почему нам нужен closest("div")? – Asking Jan 22 '19 at 20:45
@Asking потому что я подумал (так как кнопок show-all несколько), что Вы хотите показать спрятанные элементы только в том родителе, в котором находится кнопка – Jan 22 '19 at 20:47
forEach.function(item => item.style.display = "block")) - этот код будет идентичен вашему? Можете пожалуйста объяснить его. – Asking Jan 22 '19 at 20:56
@Asking Хм, что тут объяснять? Я очищаю свойство style.display, а Вы присваиваете ему значение "block". – Jan 22 '19 at 21:03
нет, могли бы вы объяснить как работает именно этот код 'forEach(item => item', в частности меня интересует часть: 'item => item''., спрашиваю потому что я не видел до этого такой формулировки. Спасибо – Asking Jan 22 '19 at 21:12
@Asking это в данном случае то же самое, что .forEach(function(item) { ... });. Читайте: "javascript", "стрелочные функции". – Jan 22 '19 at 21:14

score 2 · Answer 2 · answered Jan 22 '19 at 19:51

Можно так.

var button = document.querySelectorAll("button");
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener("click", (e) => {
    var li = e.target.previousElementSibling.querySelectorAll("li.hidden");
    for (var x = 0; x < li.length; x++) {
      li[x].style.display = "block";
    }
  });
}

.hidden {
  display: none;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li class="hidden">3</li>
  <li class="hidden">4</li>
  <li>5</li>
</ul>
<button>Show all ul #1</button>

<ul>
  <li>6</li>
  <li>7</li>
  <li class="hidden">8</li>
  <li class="hidden">9</li>
  <li>0</li>
</ul>

<button>Show all ul #2</button>

webDev_ · Answer 3 · 2019-01-22T20:00:01.537

Подразумеваю, что показываться должны лишь элементы входящие в блок с кнопкой.

Так же советую ознакомиться со статьёй на хабре, описывающей разницу между var, let и const

let x = document.getElementsByClassName("hidden");
for (let i = 0; i < x.length; i++) {
  x[i].style.display = "none"
}
let y = document.getElementsByClassName('show-all');
for (let j = 0; j < y.length; j++) {
y[j].addEventListener("click", function() {
let x = y[j].parentNode.getElementsByClassName("hidden");

for (let i = 0; i &lt; x.length; i++) {
  x[i].style.display = "block"
}


})
}

.show-all {
  cursor: pointer;
}

<div>
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class='hidden'>Lorem</li>
    <li class='hidden'>Lorem</li>
    <li class='hidden'>Lorem</li>
  </ul>
  <p class='show-all'>show</p>
</div>
<div>
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class='hidden'>Lorem</li>
    <li class='hidden'>Lorem</li>
  </ul>
  <p class='show-all'>show</p>
</div>
<div>
  <ul>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li>Lorem</li>
    <li class='hidden'>Lorem</li>
  </ul>
  <p class='show-all'>show</p>
</div>

Отображение объекта при нажатии

3 Answers3