javascript - 在浏览器调整大小时从所有图像中删除类

Question

我对 javascript 一无所知，我在这里需要一些帮助。从这里和那里的资源中，我试图执行以下逻辑。

当浏览器的宽度小于 700px 时，所有具有“star-wars”类的图像都将删除该类。

$(window).resize(function() {
  /*If browser resized, check width again */
  if ($(window).width() < 700) {
    function myFunction() {
      var element = document.querySelectorAll('img.has-zoom');
      element.classList.remove("has-zoom");
    }
  }
});

显然上面的代码是错误的。我需要你告诉我如何正确地写出上面的内容(如果这是正确的)。

Answer 1

document.querySelectorAll('img.has-zoom') 将返回 NodeList 而不是元素。

您需要循环遍历返回的列表或从中获取所需的元素，以从中提取classList。

尝试:

window.addEventListener('resize', removeClass);

function removeClass() {
  width = window.innerWidth || $(window).width();

  if ( window.innerWidth < 700) {
    var elements = document.querySelectorAll('img.has-zoom');
    [].forEach.call(elements, function(el) {
        el.classList.remove("has-zoom");
    });
  }
}

2 秒后删除类别的示例:

setTimeout(function() {
  var elements = document.querySelectorAll('img.has-zoom');
  [].forEach.call(elements, function(el) {
    el.classList.remove("has-zoom");
  });
}, 2000);

.has-zoom {
  border: 3px solid yellow;
}

<img alt="Image 1" src="https://www.gravatar.com/avatar/a29d596b0af040d7def18d1801340a8b" class="has-zoom">
<img alt="Image 2" src="https://www.gravatar.com/avatar/a29d596b0af040d7def18d1801340a8b">
<img alt="Image 3" src="https://www.gravatar.com/avatar/a29d596b0af040d7def18d1801340a8b" class="has-zoom">