javascript - 在 if/else 语句中的多个元素上添加单个类

Question

我有一个脚本，它根据滚动位置向多个 div 添加或删除一个类。这可以正常工作。

window.addEventListener('scroll', function() {
  var sp = window.pageYOffset || document.documentElement.scrollTop;
  var logo = document.querySelector(".logo");
  var btn = document.querySelector(".toggle-label");

  if (sp > 100) {
    logo.classList.add("fade-out");
    btn.classList.add("fade-out");
  } else {
    logo.classList.remove("fade-out");
    btn.classList.remove("fade-out");
  }
});

但我最近遇到了另一个脚本，它以更 Eloquent /现代的方式实现了同样的效果。 (使用 let、const 和箭头函数。)

我只是想学习如何在这个现代脚本中添加/删除多个 div 上的类。

let scrollpos = window.scrollY
const logo = document.querySelector(".logo")
const logo_height = 400

const add_class_on_scroll = () => logo.classList.add("fade-out")
const remove_class_on_scroll = () => logo.classList.remove("fade-out")


window.addEventListener('scroll', function() {
  scrollpos = window.scrollY;

  if (scrollpos >= logo_height) {
    add_class_on_scroll()
  } else {
    remove_class_on_scroll()
  }
})

我开始尝试像这样使用数组。

var fade = [logo, toggle-label];


fade.forEach(function(el) {
  el.classList.add("fade-out")
})

但我一直纠结于如何将这个数组合并到 if/else 语句中。我就是无法理解它。

顺便说一句，我并没有坚持使用数组。我只是想了解如何以任何明智的方式做到这一点。

如有任何帮助，我们将不胜感激。

Answer 1

只需将它们替换为您添加和删除类的地方:

let scrollpos = window.scrollY
var elements = [document.querySelector(".logo"), document.querySelector(".toggle-label")];  // get your elements
const logo_height = 400

const add_class_on_scroll = () => {
  elements.forEach(function(el) {         // loop to add class
    el.classList.add("fade-out");
  });
};
const remove_class_on_scroll = () => {
  elements.forEach(function(el) {         // loop to remove class
    el.classList.remove("fade-out");
  });
};

window.addEventListener('scroll', function() {
  scrollpos = window.scrollY;

  if (scrollpos >= logo_height) {
    add_class_on_scroll()
  } else {
    remove_class_on_scroll()
  }
});