javascript - 循环查询SelectorAll

Question

我有一个函数可以在单击模式之外的任何位置时关闭模式。这是代码JS:

var modal = document.querySelectorAll('.quickview-modal')
// When the user clicks anywhere outside of the modal, close it
modal.forEach(function() {
window.onclick = function(event) {
  if (event.target == modal) {
    $('.item').removeClass('modal-carousel-fix');
    $('.modal-backdrop').css('display','none')
    $('.quickview-modal').css('display','none');
    $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
  }
 }
});

HTML:

<div class="modal quickview-modal" id="quickViewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>Modal Content</p>
      </div>
    </div>
  </div>
</div>

但这似乎不起作用。如果我将其更改为

var modal = document.querySelector('.quickview-modal')
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    $('.item').removeClass('modal-carousel-fix');
    $('.modal-backdrop').css('display','none')
    $('.quickview-modal').css('display','none');
    $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
  }
 }

它适用于第一个 .quickview-modal 对象，因此我假设循环出现问题。有什么想法可以解决这个问题吗？

Answer 1

正如 @SebastianSpeitel 在上面的评论中所说

document.querySelectorAll doesn't return a real array

确实如此。它返回 NodeList 或 HTMLCollection，但您仍然可以使用 .forEach 映射它，所以这不是真正的问题。

@Luca 的评论提供了一个解决方案。

you are re-assigning window.onclick over and over, and you are comparing an HTMLElement (event.target) to a HTMLCollection

为了让这个问题的作者更容易，我编写了以下代码:

// modal is a list of elements
var modals = document.querySelectorAll('.quickview-modal')
modals.forEach(function(modal) {
  // modal is the current element
  modal.onclick = function(e) {
    $('.item').removeClass('modal-carousel-fix');
    $('.modal-backdrop').css('display','none')
    $('.quickview-modal').css('display','none');
    $(this).parent().closest('.carousel-inner').css('overflow', 'hidden');
  }
});

但是使用addEventListener绝对是更好的做法。所以考虑这样使用它: modal.addEventListener("click", function callback(e) {})，其中 click 可以替换为其他事件(悬停、按键)等..)

更好的 JQuery 解决方案是使用 $(document).on('click', '.YOURCLASS', function)

$(document).on('click', '.quickview-modal', function (e) {
    // The same code as the onclick above, OR
    $(this).css('display','none');
    $(this).parent().closest('.carousel-inner').css('overflow','hidden');
});