为什么单击事件在其他目标元素中不起作用？

Question

我试图使用e.target来弹出div并使背景变暗，但我的单击事件仅在弹出div中工作，并且只有最后一个元素将变暗，我如何更改代码以使其工作？

  <div id="dark-bg" class="dark-bg-display"></div> 
  <div class="popup-target">
    <div class="ov2-1">1</div> 
    <div class="ov2-2">2</div>
    <div class="ov2-3">3</div>
    <div class="ov2-4">4</div>
    <div class="ov2-5">5</div>
    <div class="ov2-6">6</div>
    <div class="ov2-7">7</div>
  </div>
  <div class="popup-items">
    <div class="proto-1 proto-display">
    <div class="proto-2 proto-display">
    <div class="proto-3 proto-display">
    <div class="proto-4 proto-display">
    <div class="proto-5 proto-display">
    <div class="proto-6 proto-display">
    <div class="proto-7 proto-display">
  </div>

  const ov_all = function (){
    document.addEventListener('click',(e)=>{
      for(let i = 1 ; i < 8 ; i++){
      let proto_all = document.querySelector(`.proto-${i}`)
      let ov_all = document.querySelector(`.ov2-${i}`)
      let dark_bg = document.getElementById('dark-bg')
      dark_bg.style.height = document.documentElement.scrollHeight+`px`
      dark_bg.style.width = document.documentElement.scrollWidth+`px`;
      if(e.target == ov_all){
        proto_all.classList.remove('proto-display')
        dark_bg.classList.remove('dark-bg-display')
      }
      else if(e.target !== ov_all){
        proto_all.classList.add('proto-display')
        dark_bg.classList.add('dark-bg-display')
      }
      }
    })
  }()

Answer 1

我对你的代码做了一些修改，希望能对你有所帮助。

​

[].forEach.call(document.querySelectorAll('.ov2'), function(el) {
  el.addEventListener('click', function(e) {
   
    thisId = this.getAttribute("id");
    console.log(thisId);
  
    document.querySelector('[data-id="'+thisId+'"]').classList.toggle("show");
  })
});


[].forEach.call(document.querySelectorAll('.close'), function(el) {
  el.addEventListener('click', function(e) {
    this.closest(".proto-display").classList.remove("show");
  })
});

.proto-display {
    background: #3399cc;
    position: absolute;
    width: 70%;
    margin:  10%;
    height: 40%;
    top: 0;
    border: 5px solid #DED;
    padding: 10px;
    display:none;
}
 

.show {
  display:block;
  z-index: 11; 
}

.close {
  background: #d00;
  color:#fff;
  width: 10px;
  float:right;
}

<div id="dark-bg" class="dark-bg-display"></div> 
  <div class="popup-target">
    <div class="ov2" id="ov2-1">Popup #1</div> 
    <div class="ov2" id="ov2-2">Popup #2</div>
    <div class="ov2" id="ov2-3">Popup #3</div>
    <div class="ov2" id="ov2-4">Popup #4</div>
    <div class="ov2" id="ov2-5">Popup #5</div>
    <div class="ov2" id="ov2-6">Popup #6</div>
    <div class="ov2" id="ov2-7">Popup #7</div>
  </div>
  <div class="popup-items">
    <div class="proto-display" data-id="ov2-1">
       <div class="close" >x</div> 
      111</div>
    <div class="proto-display" data-id="ov2-2">
       <div class="close" >x</div> 
      222</div>
    <div class="proto-display" data-id="ov2-3">
       <div class="close" >x</div> 
      333</div>
    <div class="proto-display" data-id="ov2-4"> 
     <div class="close" >x</div> 
      
      444</div>
    <div class="proto-display" data-id="ov2-5">
        <div class="close" >x</div> 
      555</div>
    <div class="proto-display" data-id="ov2-6">
        <div class="close" >x</div> 
      666</div>
    <div class="proto-display" data-id="ov2-7">
        <div class="close" >x</div> 
      777</div>
  </div>

​