关闭多个图片

167 阅读1分钟

关闭多个图片

<div class="erweima">
    <img src="images/code.png" alt="" />
    <span class="s1"> X1 </span>
  </div>
  <!-- <p class="erweima">erweima</p> -->
  <div class="erweima">
    <img src="images/code.png" alt="" />
    <span class="s2"> X2 </span>
  </div>

  <div class="erweima">
    <img src="images/code.png" alt="" />
    <span class="s3"> X3 </span>
  </div>
  <div class="erweima">
    <img src="images/code.png" alt="" />
    <span> X4 </span>
  </div>
  <div class="erweima">
    <img src="images/code.png" alt="" />
    <span> X5 </span>
  </div>
// 获取所有span
    let spans = document.querySelectorAll('span')
    // 遍历所有span,为每一个span绑定单击事件
    for (let i = 0; i < spans.length; i++) {
      // 关闭是的当前ele的父猴子
      spans[i].addEventListener('click', function () {
        // parentNode可以找到当前元素最近的一级父元素
        this.parentNode.style.display = 'none'
      })

    }


      // // 获取所有span
      // let spans = document.querySelectorAll('span')
      // // 遍历所有span,为每一个span绑定单击事件
      // spans.forEach(function(ele, index) {
      //   ele.addEventListener('click', function() {
      //     // 关闭是的当前ele的父元素
      //     // parentNode可以找到当前元素最近的一级父元素
      //     ele.parentNode.style.display = 'none'
      //   })
      // })