Подскажите как решить данный вопрос. Существует неопределённое количество элементов 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>
Понятно что данный код реализует нажатие по любому элементу а схожим с делегированием, но не знаю как возможно выводить при нажатий изображение не только в первом элементе.