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不返回真实数组

是的。它返回NodeList或HTMLCollection，但是您仍然可以使用.forEach对其进行映射，所以这不是真正的问题。

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

您正在重新分配window.onclick一遍又一遍，并且您正在将HTMLElement（event.target）与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');
});

Answer 2

尝试一下：

camera

遍历querySelectorAll

2 个答案: