javascript - 将多个 jQuery 元素选择器传递给一个函数

Question

myFunc() 绑定到文档滚动，因此会被大量调用。我想将 HTML 选择存储在 var 中并将它们传递给函数。当我在下面运行我的示例时，我得到了控制台错误Unable to get value of the property 'css': object is null or undefined。

var a1 = $('#a1');
var a2 = $('#a2');

$(document).bind("scroll", function() {
  setTimeout(myFunc, 1000, a1, a2);
}

function myFunc(a1, a2) {
  a1.css('color', 'blue');
  a2.css('font-weight', 'bold');
}

如何将存储在变量中的多个 jQuery 选择器传递给函数？

Answer 1

$(document).bind("scroll", function() {
  setTimeout(function() {
      myFunc(a1, a2);
    },1000);
}); // close );

function myFunc(a1, a2) {
  a1.css('color', 'blue');
  a2.css('font-weight', 'bold');
}

Answer 2

尝试以下操作：

$(document).bind("scroll", function() {
    setTimeout(function() {
        myFunc(a1, a2);
    }, 1000);
}); // and close properly your function

Answer 3

您的a1和a2变量可以设置在页面上存在#a1和#a2存在的元素之前（特别是如果它没有包含在 onload/ready 处理程序中并且脚本位于标题中）。我会像这样设置它，以确保它在滚动事件发生#a1时#a2存在。

var a1 = undefined;
var a2 = undefined;

$(document).bind("scroll", function() {
  if(typeof(a1) === "undefined") { a1 = $("#a1");} //will only reset a1 if undefined
  if(typeof(a2) === "undefined") {a2 = $("#a2");}

  setTimeout(function(){myFunc(a1,a2)}, 1000);
}); //don't forget your ')'

function myFunc(a1, a2) { 
  a1.css('color', 'blue');
  a2.css('font-weight', 'bold');
}

Answer 4

您还可以将元素存储在数组中：

jsBin 演示

var a1 = ['#a1','#a2'];

$(document).bind("scroll", function() {
    setTimeout(function() {
        myFunc(a1);
    }, 1000);
});

function myFunc(el) {
  $(el[0]).css('color', 'blue');
  $(el[1]).css('font-weight', 'bold');
}