var wrappers = document.querySelectorAll('.wrapper'); var closse = document.querySelectorAll('.rec'); for (var i = 0; i<wrappers.length; i++) { wrappers[i].onclick = function() { this.firstElementChild.style.display = 'block'; rec[i].onclick = function() { } }; }; 
 .wrapper { width: 100px; height: 100px; border: 2px solid blue; display: inline-block; cursor:pointer; margin: 10px; position: relative; } .some { display: none; position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0.2); } .rec { width: 20px; height: 3px; background-color: black; position: absolute; right: 4px; top: 10px; } 
 <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div>

There are 4 divs when they are clicked, they are blacked out and a dash appears on them, how to make it so that when you click on the dash the blackout disappears?

2 answers 2

 var wrappers = document.querySelectorAll('.wrapper'); for (var wrap of wrappers) { wrap.onclick = function() { this.firstElementChild.style.display = 'block'; }; wrap.querySelector(".rec").onclick = function() { event.stopImmediatePropagation(); this.closest(".some").style.display = "none"; }; } 
 .wrapper { width: 100px; height: 100px; border: 2px solid blue; display: inline-block; cursor: pointer; margin: 10px; position: relative; } .some { display: none; position: absolute; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.2); } .rec { width: 20px; height: 3px; background-color: black; position: absolute; right: 4px; top: 10px; } 
 <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div>

  • does not work, some kind of error. - uzi_no_uzi
  • one
    @uzi_no_uzi some kind? - andreymal
  • @andreymal prntscr.com/huu1al - uzi_no_uzi
  • @uzi_no_uzi works for me, you can try to write something else like this - wrap.querySelector(".rec").onclick = function(event) - Dmitry Polyanin

The most banal way

 var wrappers = document.querySelectorAll('.wrapper'); var closse = document.querySelectorAll('.rec'); for (var i = 0; i<wrappers.length; i++) { wrappers[i].onclick = function() { if (this.firstElementChild.style.display == 'block') this.firstElementChild.style.display = 'none' else this.firstElementChild.style.display = 'block' }; }; 
 .wrapper { width: 100px; height: 100px; border: 2px solid blue; display: inline-block; cursor:pointer; margin: 10px; position: relative; } .some { display: none; position: absolute; height: 100%; width: 100%; background-color: rgba(0,0,0,0.2); } .rec { width: 20px; height: 3px; background-color: black; position: absolute; right: 4px; top: 10px; } 
 <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div> <div class="wrapper"> <div class="some"> <div class="rec"></div> </div> </div>

  • This method works when you click on the entire window, but you need to work when you click on the cross. But I have already solved the problem. - uzi_no_uzi pm