Отображение объекта при нажатии [дубликат]

148
24 августа 2019, 20:40

На данный вопрос уже ответили:

  • Почему асинхронная функция внутри цикла выполняет последнюю итерацию много раз? 2 ответа

не могу понять в чём проблема, хочу чтобы при нажатии объект с классом '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>

Answer 1

Можно так.

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>

Answer 2

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

Так же советую ознакомиться со статьёй на хабре, описывающей разницу между 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 < 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>

Answer 3

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> 
     
    <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>

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

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

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

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

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

READ ALSO
Метод submit у формы асинхронен?
javascript

Метод submit у формы асинхронен?

Столкнулся с проблемой (не ожидаемым поведением) в ФФ, когда определенный код выполнялся после formsubmit(), хотя казалось, что этого не должно...

 98
JS - Замена символов в файле [закрыт]
javascript

JS - Замена символов в файле [закрыт]

Есть файл, который содержит:

 105
Подписка на событие и передача данных javascript
javascript

Подписка на событие и передача данных javascript

Есть следующая задача

 123
Конвертирование base64 строки в массив байт
javascript

Конвертирование base64 строки в массив байт

На страничке необходимо загрузить в input type file, а так же вывести эту картинку в imgА далее ajax запросом передать base64 строку на сервер и там перевести...

 137