Javascript Probleme mit Klickereignissen

Question

Ich versuche sicherzustellen, dass alle anderen geschlossen sind, wenn ein bestimmtes Element angeklickt wird.

Die einzige Möglichkeit, die derzeit funktioniert, ist, wenn Sie die Pop-ups schließen und öffnen, indem Sie zweimal auf denselben li klicken.

Example Here

Problem 01

Wenn ich das Popup über #overlay klicken und schließen, die #overlay wird die Klasse wechseln. Wie targe ich das richtige Popup und schließe es auch?

Problem 02

Wenn ich das Popup öffnen, indem Sie den ersten li klicken und klicken Sie dann auf ein anderes li die gesamte Bestellung bis schraubt (weil es nicht das letzte nicht schließt).

function changeClass(element, remove, add) { 
 
    if (element.classList.contains(remove)) { 
 
    element.classList.remove(remove); 
 
    element.classList.add(add); 
 
    } else if (element.classList.contains(add)) { 
 
    element.classList.remove(add); 
 
    element.classList.add(remove); 
 
    } 
 
} 
 

 
function hasClass(element, cls) { 
 
    return element.classList.contains(cls); 
 
} 
 

 
var overlay = document.querySelector("#overlay") 
 
var leftNavModal = document.querySelector("#leftNavModal"); 
 
var options = document.querySelectorAll(".options"); 
 
options.forEach(function(c) { 
 
    let target = c; 
 
    c.addEventListener("click", function(d) { 
 
    var div = document.querySelector(this.getAttribute("data-div")); // *** 
 
    changeClass(overlay, "displayn", "displayb") 
 
    changeClass(div, "displayb", "displayn"); 
 
    //TAGER FAT I DATA ATTRIBUTEN SOM SELECTOR TIL DIV'EN ID 
 
    }, false); 
 
}); 
 
var option = document.querySelector("#option"); 
 
window.addEventListener('click', function(event) { 
 
    if (event.target === overlay || event.target === option) { 
 
    var div = document.querySelectorAll("popUp"); 
 
    overlay.style.display = "none"; 
 

 
    var div = document.querySelectorAll("popUp"); 
 

 
    }; 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    display: flex; 
 
} 
 

 
#navigation { 
 
    width: 20vw; 
 
    height: 100vh; 
 
    background-color: red; 
 
} 
 

 
#navigation ul li { 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
#content { 
 
    width: 80vw; 
 
    height: 100vh; 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 

 
.displayn { 
 
    display: none; 
 
} 
 

 
.displayb { 
 
    display: block; 
 
} 
 

 
.leftNavModal { 
 
    padding: 15px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    border: 2px solid #000; 
 
    background-color: #fff; 
 
} 
 

 
#overlay { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div id="navigation"> 
 
    <ul class="col100 leftLinkWrapper overflowh "> 
 
     <li data-div="#id01" class="options displayb pad20 bgcg pointer">Random 01</li> 
 
     <li data-div="#id02" class="options displayb pad20 bgcg pointer">Random 02</li> 
 
     <li data-div="#id03" class="options displayb pad20 bgcg pointer">Random 03</li> 
 
     <li data-div="#id04" class="options displayb pad20 bgcg pointer">Random 04</li> 
 
    </ul> 
 
    </div> 
 
    <div id="content"> 
 
    <div id="overlay" class="displayn"> 
 
     <div id="leftNavModal" class="leftNavModal"> 
 
     <div id="id01" class="popUp displayn">01 - Some say this is random</div> 
 
     <div id="id02" class="popUp displayn">02 - This is not that random</div> 
 
     <div id="id03" class="popUp displayn">03 - So what is random</div> 
 
     <div id="id04" class="popUp displayn">04 - Nothing is</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Ok, zunächst so sollten Sie Ihren Code besser organisieren, sondern versuchen, Ihren Code, um die weniger möglich hier zu ändern geht es!

So erhalten Sie alle Pops außerhalb des Ereignisses (nur um es effizienter zu machen). Dann iteriere durch die Elemente, die die IDs vergleichen, wenn die ID nicht mit einer übereinstimmt, dann setze sie nicht versteckt, sonst zeige sie. Grundsätzlich muss man jedes Element durchlaufen! Das Fensterereignis behandelt die Situationen, in denen weder die Option noch das Overlay angeklickt wird!

function changeClass(element, remove, add) { 
 
    if (element.classList.contains(remove)) { 
 
    element.classList.remove(remove); 
 
    element.classList.add(add); 
 
    } else if (element.classList.contains(add)) { 
 
    element.classList.remove(add); 
 
    element.classList.add(remove); 
 
    } 
 
} 
 

 
function hasClass(element, cls) { 
 
    return element.classList.contains(cls); 
 
} 
 

 
var overlay = document.querySelector("#overlay") 
 
var leftNavModal = document.querySelector("#leftNavModal"); 
 
var options = document.querySelectorAll(".options"); 
 
var pops = document.querySelectorAll(".popUp"); 
 

 
options.forEach(function(c) { 
 
    let target = c; 
 
    c.addEventListener("click", function(d) { 
 
    var id = this.getAttribute("data-div"); // *** 
 
    pops.forEach(function(x){ 
 
     x.style.display = x.id !== id ? "none" : "block"; 
 
    }); 
 
    }, false); 
 
}); 
 
var option = document.querySelector("#option"); 
 
window.addEventListener('click', function(event) { 
 
    
 
    overlay.style.display = !event.target.classList.contains("options") &&   !event.target.classList.contains("overlay") ? "none" : "block"; 
 
    
 
});

body { 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    display: flex; 
 
} 
 

 
#navigation { 
 
    width: 20vw; 
 
    height: 100vh; 
 
    background-color: red; 
 
} 
 

 
#navigation ul li { 
 
    padding: 10px; 
 
    cursor: pointer; 
 
} 
 

 
#content { 
 
    width: 80vw; 
 
    height: 100vh; 
 
    background-color: blue; 
 
    position: relative; 
 
} 
 

 
.displayn { 
 
    display: none; 
 
} 
 

 
.displayb { 
 
    display: block; 
 
} 
 

 
.leftNavModal { 
 
    padding: 15px; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    border: 2px solid #000; 
 
    background-color: #fff; 
 
} 
 

 
#overlay { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div id="navigation"> 
 
    <ul class="col100 leftLinkWrapper overflowh "> 
 
     <li data-div="id01" class="options displayb pad20 bgcg pointer">Random 01</li> 
 
     <li data-div="id02" class="options displayb pad20 bgcg pointer">Random 02</li> 
 
     <li data-div="id03" class="options displayb pad20 bgcg pointer">Random 03</li> 
 
     <li data-div="id04" class="options displayb pad20 bgcg pointer">Random 04</li> 
 
    </ul> 
 
    </div> 
 
    <div id="content"> 
 
    <div id="overlay" class="displayn"> 
 
     <div id="leftNavModal" class="leftNavModal"> 
 
     <div id="id01" class="popUp displayn">01 - Some say this is random</div> 
 
     <div id="id02" class="popUp displayn">02 - This is not that random</div> 
 
     <div id="id03" class="popUp displayn">03 - So what is random</div> 
 
     <div id="id04" class="popUp displayn">04 - Nothing is</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>