Question

当我将相同的功能应用于多个元素时，我通常会执行以下操作：

var func = function(elem) {
  elem.style.color = 'red';
};

var p = document.querySelector('p');
var div = document.querySelector('div');

func(p);
func(div);

我想知道是否有一种简单的方法可以同时将此功能应用于两个（或更多）元素？例如：

func(p, div); // Apply my function to both elements at once

Answer 1

您可以使用arguments：

var func = function() {
    var args = [].slice.apply(arguments);

    args.forEach(function (elem) {
        elem.style.color = 'red';
    });
};

按照你想要的方式打电话：

func(p, div);

另一方面，有一个名为＆＃34; rest参数＆＃34;计划在ECMAScript 6中，只考虑你的想法，看看here。

Answer 2

转换函数使其返回

通过转换函数使其返回自身，您可以使用语法

func(p)(div)

要完成这项工作，您需要安排func返回。

function selfify(fn) {
    return function self() {
        fn.apply(this, arguments);
        return self;
    };
}

然后

funcx = selfify(func);
funcx(p)(div);

转换函数，以便在每个参数

上调用它

如果您更喜欢func(p, div)语法，请编写以下类型的转换器，它创建一个函数，在其每个参数上调用基础函数：

function repeatify(fn) {
    return function() {
        Array.prototype.forEach.call(arguments, fn, this);
    };
}

然后

funcy = repeatify(func);
funcy(p, div);

如果基础函数需要两个或更多参数，这显然不会有效。

在ES6中，使用rest参数，上面的内容可以更简单地写成

function repeatify(fn) {
    return function(...args) {
        [...args].forEach(fn, this);
    };
}

真正的简单解决方案

如果所有上述功能风格的编程都太过无法解决，那么您真正需要做的就是：

[p, div].forEach(func);

Answer 3

你可以在这里结合一些很好的答案来提出一个易于重用的功能编程代码：

var f = function (applyTo) {
    var makeArray = function(arrayLike) {
        return Array.prototype.slice.call(arrayLike);
    };
    return function () {
        var args = makeArray(arguments),
            elements = [];
        args.forEach(function (selector) {
            var newElements = makeArray(document.querySelectorAll(selector));
            console.log(newElements);
            elements = elements.concat(newElements);
        });
        elements.forEach(applyTo);
    }
};

var redify = function (elem) {
    elem.style.color = '#F00';
}

var underline = function (elem) {
    elem.style.textDecoration = 'underline';
}

var overline = function (elem) {
    elem.style.textDecoration = 'overline';
}

f(redify)('div', 'p');

f(underline)('div.test2');

f(overline)('p.test2');

JSFiddle

Answer 4

var forEach = Array.prototype.forEach;
var elms = document.querySelectorAll('p, div'); // css selector to match both p & div
var func = function(elem) {
    elem.style.color = 'red';
};

forEach.call(elms, func);

Answer 5

考虑组合前面答案的基本循环和使用类而不是querySelector。

因此，您可以将所需的分类分配给您需要通过该函数的所有元素，然后只需使用它们调用该函数：

var func = function (elem) {
    for (var i = 0; i < elem.length; i++) {
        elem[i].style.color = 'red';
    }
};

func(document.getElementsByClassName("yourClass"));

Answer 6

正确的方法是通过使用类。

<p class="myClass"></p>
<div class="myClass"></div>

然后在您的javascript中，当您想要更改这两个元素的颜色时，只需执行以下操作：

var elems = document.getElementsByClassName("myClass");

for(var i=0; i<elems.length; i++){
    func(elem[i]);
}

如果您拥有大量元素，那么从长远来看这将非常有用，根据您的需求在课程中组织它们是最佳选择。

一次将函数应用于多个元素

6 个答案:

转换函数使其返回

转换函数，以便在每个参数

真正的简单解决方案