不一致的JavaScript元素控制

Question

var previous = 0;
function displayLaptopInfo(id) {
  if (previous != 0) {
    document.getElementById(previous).style.display = "none";
  }
  document.getElementById(id).style.display = "block";
  previous = id;
}
function closePanel(idp) {
  document.getElementById(idp).style.display = "none";
  alert(idp);
}

.laptop-online {
  background-color: green;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-repair {
  background-color: yellow;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-loan {
  background-color: orange;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-missing {
  background-color: red;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.infoPanel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vw;
  background-color: gray;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  font-size: 3em;
  text-align: left;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="laptop-online" onclick="displayLaptopInfo('1')">
  1
  <div class="infoPanel" onclick="closePanel('1')" id="1">
    Laptop: 1<br> Serial: BFLDY52<br> Location: In Cart<br> Status: Online<br>
  </div>
</div>
<div class="laptop-repair" onclick="displayLaptopInfo(2)">
  2
  <div class="infoPanel" onclick="closePanel(2)" id="2">
    Laptop: 2<br> Serial: 7MLDY52<br> Location: In Cart<br> Status: Down for Repair<br>
  </div>
</div>
<div class="laptop-loan" onclick="displayLaptopInfo(3)">
  3
  <div class="infoPanel" onclick="closePanel(3)" id="3">
    Laptop: 3<br> Serial: 7VJCY52<br> Location: 2-140<br> Status: Out on Loan<br>
  </div>
</div>

晚上好，感谢您对此的任何帮助。我一直盯着这个令人困惑的问题已经有几个小时了，我只是看不到我缺少什么。我走了几个小时，回来了，但是我一切看起来仍然很正常。本质上，我无法获得79行（document.getElementById(idp).style.display = "none";）以使DIV消失。它将在第72行（document.getElementById(previous).style.display = "none";）中消失，但不会在第79行上执行任何操作。我不明白为什么单击自身时该元素不会消失。

这个想法是单击三个主框之一，将出现一个带有信息的较大框，然后单击较大的框以关闭它，以便您再次看到三个主框。

谢谢

Answer 1

您需要停止事件冒泡到父元素，因此在closePanel()中使用event.stopPropagation();。

遍历什么事件冒泡和捕获？

function closePanel(event, idp) {
  document.getElementById(idp).style.display = "none";
  event.stopPropagation();
}

var previous = 0;
function displayLaptopInfo(id) {
  if (previous != 0) {
    document.getElementById(previous).style.display = "none";
  }
  document.getElementById(id).style.display = "block";
  previous = id;
}
function closePanel(event, idp) {
  document.getElementById(idp).style.display = "none";
  event.stopPropagation();
  alert(idp);
}

.laptop-online {
  background-color: green;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-repair {
  background-color: yellow;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-loan {
  background-color: orange;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-missing {
  background-color: red;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.infoPanel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vw;
  background-color: gray;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  font-size: 3em;
  text-align: left;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="laptop-online" onclick="displayLaptopInfo('1')">
  1
  <div class="infoPanel" onclick="closePanel(event, '1')" id="1">
    Laptop: 1<br> Serial: BFLDY52<br> Location: In Cart<br> Status: Online<br>
  </div>
</div>
<div class="laptop-repair" onclick="displayLaptopInfo(2)">
  2
  <div class="infoPanel" onclick="closePanel(event, 2)" id="2">
    Laptop: 2<br> Serial: 7MLDY52<br> Location: In Cart<br> Status: Down for Repair<br>
  </div>
</div>
<div class="laptop-loan" onclick="displayLaptopInfo(3)">
  3
  <div class="infoPanel" onclick="closePanel(event, 3)" id="3">
    Laptop: 3<br> Serial: 7VJCY52<br> Location: 2-140<br> Status: Out on Loan<br>
  </div>
</div>

Answer 2

使用此关键字传递关闭函数中的整个元素。笔记本电脑维修区和信息部相互嵌套。当您单击以关闭DIV时，DisplayLaptop函数将被调用。使DIV分开，它将起作用

var previous = 0;
function displayLaptopInfo(id) {
  if (previous != 0) {
    document.getElementById(previous).style.display = "none";
  }
  document.getElementById(id).setAttribute('style', 'display:block')
  previous = id;
}
function closePanel(idp) {
  idp.setAttribute('style', 'display:none');
  alert(idp.getAttribute('id'))
}

.laptop-online {
  background-color: green;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-repair {
  background-color: yellow;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-loan {
  background-color: orange;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.laptop-missing {
  background-color: red;
  width: 30%;
  margin: 1%;
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  float: left;
  border-radius: 10px;
  height: 7.5vh;
}
.infoPanel {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 80vw;
  background-color: gray;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 40px;
  font-size: 3em;
  text-align: left;
  color: white;
  font-family: 'Montserrat', sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
  <div class="laptop-online" onclick="displayLaptopInfo('1')">
    1
  </div>
  <div class="infoPanel" onclick="closePanel(this)" id="1">
    Laptop: 1<br> Serial: BFLDY52<br> Location: In Cart<br> Status: Online<br>
  </div>
  <div class="laptop-repair" onclick="displayLaptopInfo(2)">
    2</div>
  <div class="infoPanel" onclick="closePanel(this)" id="2">
    Laptop: 2<br> Serial: 7MLDY52<br> Location: In Cart<br> Status: Down for Repair<br>
  </div>
  <div class="laptop-loan" onclick="displayLaptopInfo(3)">
    3</div>
  <div class="infoPanel" onclick="closePanel(this)" id="3">
    Laptop: 3<br> Serial: 7VJCY52<br> Location: 2-140<br> Status: Out on Loan<br></div>
</body>
</html>