点击事件的{Javascript问题

Question

我正在努力确保在点击某个元素时所有其他元素都被关闭。

目前唯一有效的方法是，如果您通过点击相同的li两次关闭并打开弹出窗口。

Example Here

问题01

当我点击并通过#overlay关闭弹出窗口时，#overlay会切换课程。如何定位正确的弹出窗口并关闭它？

问题02

当我通过点击第一个li然后点击另一个li打开弹出窗口时，整个订单都搞砸了（因为它没有关闭最后一个）。

＆＃13;

＆＃13;

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");

  };
});

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

好的，首先，你应该更好地组织你的代码，但是尝试修改代码的可能性就越小！

所以在活动之外获取所有流行音乐（只是为了提高效率）。然后遍历比较id的元素，如果id与单击的id不对应，则将其设置为隐藏，否则显示它。基本上你必须遍历每个元素！窗口事件处理没有单击选项和叠加层的情况！

＆＃13;

＆＃13;

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";
 
});

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;