Question

我正在尝试使以下代码正常工作，但它似乎仅适用于列表中的最后一个模式。

BluetoothDevice

有人可以帮我弄清楚我要去哪里了吗？

编辑：以下是使用下面的答案中描述的事件侦听的代码段-此代码段显示实现此事件侦听器会阻止按钮在单击时起作用-我执行不正确吗？如果我删除JS中与单击任何地方有关的代码，其余的工作正常。

navigator.permission

class LossHistory(keras.callbacks.Callback):
    def on_train_begin(self, logs={}):
        self.losses = []

    def on_batch_end(self, batch, logs={}):
        self.losses.append(logs.get('loss'))

model = Sequential()
model.add(Dense(10, input_dim=784, kernel_initializer='uniform'))
model.add(Activation('softmax'))
model.compile(loss='categorical_crossentropy', optimizer='rmsprop')

history = LossHistory()
model.fit(x_train, y_train, batch_size=128, epochs=20, verbose=0, callbacks=[history])

print(history.losses)
# outputs
'''
[0.66047596406559383, 0.3547245744908703, ..., 0.25953155204159617, 0.25901699725311789]
'''

var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");
var spans=document.getElementsByClassName("close-modal");

for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }

}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }
}
// When the user clicks anywhere outside of the modal, close it

for(let i=0;i<modals.length;i++){
        window.onclick = function(event) {
            if (event.target == modals[i]) {
                modals[i].style.display = "none";
            }
        }
    }
}

Answer 1

以下是您要寻找的。如上所述，您将通过循环并重新创建绑定到window的事件，但是该事件只需要注册一次，如下所示。

window.addEventListener('click', function() {
  var modals = document.getElementsByClassName('modal');

  for (let i = 0; i < modals.length; i++) {
    modals[i].style.display = "none";
  }
});

Answer 2

您的for循环每次都替换window.onclick侦听器，而是使用window.addEventListener('click', function....)

您可能希望存储对这些功能的引用，以便稍后可以使用window.removeEventListener。

Answer 3

这与您要寻找的东西接近吗？

我大部分时候都重复使用了您的代码，并删除了原来的代码。

最重要的部分是，在用来关闭模态的点击处理程序内部，您需要检查点击的目标是否是按钮之一。我还删除了按钮周围的跨度，这些跨度似乎没有任何意义。

最后，我用onclick =替换了您的addEventListener('click',，与onclick相反，对于任何给定事件，它都可以使用多个事件处理程序。

var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    modals[i].style.display = "block";
  })
}

document.body.addEventListener('click', function(e) {
  if (e.target.matches('button.pop-up')) return;
  
  for (let i = 0; i < modals.length; i++) {
    modals[i].style.display = "none";
  }
});

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 10;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  display: table;
}


/* Modal Content */

.modal-content div {
  padding: 5px;
  margin: 5px;
}


/* The Close Button */

.close-modal {
  color: #aaaaaa;
  text-align: right;
  font-size: 28px;
  font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<div class="modal">
  <div class="modal-content">
    stuff1
    <p class="close-modal">&times;</p>
  </div>
</div>
<div class="modal">
  <div class="modal-content">stuff2
    <p class="close-modal">&times;</p>
  </div>
</div>
<button type="button" class="pop-up">SEND</button>
<button type="button" class="pop-up">SEND</button>

Answer 4

为清楚起见，这是我正在使用的解决方案：

    // Get the modal
var modals = document.getElementsByClassName('modal');
var btns = document.getElementsByClassName("pop-up");
var spans=document.getElementsByClassName("close-modal");

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    modals[i].style.display = "block";
  })
}

for (let i = 0; i < spans.length; i++) {
  spans[i].addEventListener('click', function() {
    modals[i].style.display = "none";
  })
}

for (let i = 0; i < btns.length; i++) {
  modals[i].addEventListener('click', function() {
        if (event.target == modals[i]) {
            modals[i].style.display = "none";
        }
  })
}

这似乎按预期工作，据我所知，为所有内容创建一个侦听器没有问题。

如果模态数未知，则多个模态不会关闭

4 个答案: