1

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

var one = document.querySelectorAll('.one a');

for(var i = 0; i < one.length; i++){
	one[i].addEventListener('click', function() {
		var four = document.querySelector('.four');
		if(four.style.visibility == 'hidden') {
			four.style.visibility = 'visible';
		} else if(four.style.visibility == 'visible'){
			four.style.visibility = 'hidden';
		}
	})
}
<div class="one">
<h3>First</h3>
<div class="two"><img src="../../../img/1_1.png" alt="1"></div>
<a class="three" href="#">показать</a>
<img class="four" style="visibility:hidden;" src="../../../img/1_1_result.png" alt="1_result">
</div>
<div class="one">
<h3>Second</h3>
<div class="two"><img src="../../../img/1_1.png" alt="1"></div>
<a class="three" href="#">показать</a>
<img class="four" style="visibility:hidden;" src="../../../img/1_1_result.png" alt="1_result">
</div>

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

1 ответ 1

2

document.querySelectorAll('.one a').forEach(oneA => {
  oneA.addEventListener('click', function(e) {
    e.preventDefault();
    var four = this.closest('.one').querySelector('.four');
    if (four.style.visibility == 'hidden') {
      four.style.visibility = 'visible';
    } else if (four.style.visibility == 'visible') {
      four.style.visibility = 'hidden';
    }
  })
});
<div class="one">
  <h3>First</h3>
  <div class="two"><img src="../../../img/1_1.png" alt="1"></div>
  <a class="three" href="#">показать</a>
  <img class="four" style="visibility:hidden;" src="../../../img/1_1_result.png" alt="1_result">
</div>
<div class="one">
  <h3>Second</h3>
  <div class="two"><img src="../../../img/1_1.png" alt="1"></div>
  <a class="three" href="#">показать</a>
  <img class="four" style="visibility:hidden;" src="../../../img/1_1_result.png" alt="1_result">
</div>

3
  • @maks-maks157 function(e) { e.preventDefault(); ...
    – user176262
    13 мая 2020 в 15:29
  • Спасибо ещё раз. 13 мая 2020 в 15:38
  • @maks-maks157 Пожалуйста. Успехов!
    – user176262
    13 мая 2020 в 15:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.