Question

我正在尝试使用数组来打开和关闭模式，而不是为每个模式都设置一个变量。它适用于打开，但不适用于关闭。它遍历数组中的第一个，但不遍历其他数组。具体代码在函数“ closeModal.onclick”和“ window.onclick”中。

JS：

  'use strict';
  const modalContent = [
    document.querySelector("#modal-or"), 
    document.querySelector("#modal-and"), 
    document.querySelector("#modal-not"), 
    document.querySelector("#modal-shortCircuit")];
  const modal = document.querySelector(".modal");
  const closeModal = document.querySelector(".closeModal");

  document.querySelector("#or").onclick = function() {
    modalContent[0].setAttribute('style', 'display: block;');
  }

  document.querySelector("#and").onclick = function() {
    modalContent[1].setAttribute('style', 'display: block;');
  }

  document.querySelector("#not").onclick = function() {
    modalContent[2].setAttribute('style', 'display: block;');
  }

  document.querySelector("#shortCircuit").onclick = function() {
    modalContent[3].setAttribute('style', 'display: block;');
  }

  closeModal.onclick = function(e) {
    e.stopPropagation(e);
    modalContent.forEach(element => {
      element.setAttribute('style', 'display: none;');
    });
  }

  window.onclick = function(event) {
    if (event.target === modal) {
      modalContent.forEach(element => {
        element.setAttribute('style', 'display: none;');
      });
    }
  }

HTML：

<body>
    <div class="flexLayout">
      <div id="or">
        <div class="modal" id="modal-or">
          <div class="modal-content">
            <button class="closeModal">&times;</button>
          </div>
        </div>
      </div>
      <div id="and">
        <div class="modal" id="modal-and">
          <div class="modal-content">
            <button class="closeModal">&times;</button>
          </div>
        </div>
      </div>
      <div id="not">
        <div class="modal" id="modal-not">
          <div class="modal-content">
            <button class="closeModal">&times;</button>
          </div>
        </div>
      </div>
      <div id="shortCircuit">
        <div class="modal" id="modal-shortCircuit">
          <div class="modal-content">
            <button class="closeModal">&times;</button>
          </div>
        </div>
      </div>
    </div>
</body>

CSS：

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: hsl(0, 0%, 0%);
  background-color: hsla(0, 0%, 0%, 0.4);
}

.modal-content {
  background-color: hsl(0, 0%, 100%);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #878787;
  width: 80%;
}

.closeModal {
  color: #aaa;
  float: right;
  font-size: 2em;
  font-weight: bold;
}

.closeModal:hover, .closeModal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

Answer 1

This is an array of Integers: [2, 5]
This is an Integer: 2
This is an Integer: 5
This is b: 2
This is c: 5
This is a sum of b + c: 7

ForEach循环关闭模态

1 个答案: