主页 / 问题 / 1124960
Accepted
maks-maks157
Asked:2020-05-13 21:36:22 +0800 CST2020-05-13 21:36:22 +0800 CST

事件处理和 JavaScript 委托

  • 772

请告知如何解决此问题。元素a的数量不定，当你点击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>

很明显，这段代码实现了对任何类似于委托的元素的单击，但我不知道如何不仅在第一个元素中单击时显示图像。

javascript

1 个回答

  1. Best Answer

    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>

    • 2

相关问题