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

【问题标题】：Adding a single class on multiple elements in if/else statement在 if/else 语句中的多个元素上添加单个类
【发布时间】：2018-12-17 15:09:26
【问题描述】：

我有一个脚本，它根据滚动位置向多个 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");
  }
});

但我最近遇到了另一个脚本，它以更雄辩/现代的方式实现了同样的效果。（使用 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 语句中。我就是想不通。

顺便说一句，我并没有坚持使用数组。我只是想了解如何以任何明智的方式完成此操作。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript arrays if-statement constants

【解决方案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()
  }
});

【讨论】：

Pete，我不想修改第一个脚本。我正在尝试在第二个（现代）脚本中向多个 div 添加一个类。
Pete，非常感谢你教我怎么做！！！不过，我对您的注释感到困惑。根据您的注释， el.classList.add("fade-out");
哈哈复制和粘贴错误 - 弄错了，知道我必须更改一个但没有编辑 sn-p 并直接编辑所见即所得

【解决方案2】：

并非所有浏览器都支持 LET 和/或 ARROW 函数！您使用 forEach 的方法不太正确。

fade.forEach( function(one_fade_id){
  document.querySelect( '#'+ one_fade_id ).classList.add( "fade-out" )
} )

或

fade.forEach( (fadeId) => { 
  document.querySelect( '#'+ fadeId ).classList.add( "fade-out" ) 
} )

【讨论】：

"并非所有浏览器都支持 LET 和/或 ARROW 函数！"
只是检查 .. 和 .. 确保没有人反对我的回答，因为我没有提到“YMMV”;-)