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");
  }
});

但是我最近遇到了另一个脚本，该脚本以一种更加雄辩/现代的方式实现了相同的目标。（使用let，const和arrow函数。）

我只是想学习如何在这种现代脚本中在多个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()
  }
});

Answer 2

并非所有浏览器都支持LET和/或箭头功能！您使用forEach的方法不太正确。

CREATE OR REPLACE PACKAGE security_package AS 
FUNCTION sec_fun (D1 VARCHAR2, D2 VARCHAR2) 
RETURN VARCHAR2; 
END;
/
CREATE OR REPLACE PACKAGE BODY security_package AS 
FUNCTION sec_fun (D1 VARCHAR2, D2 VARCHAR2) 
RETURN VARCHAR2
IS
    V_ID varchar2(400);
begin
    V_ID := SYS_CONTEXT('USERENV', 'SESSION_USER');
    if (SYS_CONTEXT('payroll_ctx','dept') = 'accounting') then
    RETURN 'DEPT != ' || CHR(39)||SYS_CONTEXT('payroll_ctx','dept')||CHR(39);
    ELSE
        RETURN 'EMP_ID = ' || CHR(39)||V_ID||CHR(39);
  END IF;
    EXCEPTION
  WHEN NO_DATA_FOUND
  THEN
    RETURN '1 = 0';
end sec_fun;
end security_package;
/

或

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

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

2 个答案: