如何一次为多个元素调用已创建的函数?

How do I call a created function for multiple elements at once?

本文关键字：创建 函数 调用 元素 何一次      更新时间：2023-09-26

我创建了一个简短的函数来说明我的观点。

假设我已经创建了一个myFunction()函数，它提供以下服务:

function myFunction(element,property,color){
    $(element).css(property,color);
};

对于我想要应用这个函数的每个元素，我将使用:

myFunction('div','background-color','green');
myFunction('span','border-color','blue');
myFunction('i','color','red');

演示:http://jsfiddle.net/h4yY3/

但是我希望我可以只调用一次所有这些处理程序的函数。例如，我可以这样做:

function myFunction({element,property,color}){
...
}
myFunction({'div','background-color','green'},{'span','border-color','blue'},{'i','color','red'});

有人能教我正确的方法吗?我尝试了搜索，但不知道我是否使用了正确的术语将其称为"处理程序"。

,请建议。谢谢你。

您可以这样做(给定您的描述):

// @args { elm: ELM, prop: PROPERTY, val: VALUE },...
function applyCSS() {
  var args = [].slice.call(arguments),
      len = args.length;
  while (len--) {
    var cfg = args[len];
    $(cfg.elm).css(cfg.prop, cfg.val);
  }
}
applyCSS(
  { elm: '.block', prop: 'background-color', val: '#ccc'},
  { elm: '.para', prop: 'color', val: 'blue' },
  { elm: '.thing', prop: 'font-size', val: '14pt' }
);

请看这个JSBin的例子。

Update:受@ActiveHigh版本的启发，我认为这可能是一个更好的函数参数组织，允许在一次调用中修改多个元素的多个属性(与上面的JSBin示例相同):

// Alternative version to allow multiple properties per element to be set.
// @args { 'elm': { prop: val, ... }, ... }
function applyCSS2(obj) {
  var elms = Object.keys(obj),
      len = elms.length;
  $.map(elms, function(elm) {
    $(elm).css(obj[elm]);
  });
}

调用它看起来像这样:

applyCSS2({
  '.block': { 'background-color': '#ccc', 'color': '#fff' },
  '.para': { 'color': 'blue', 'font-family': 'Verdana, sans-serif' },
  '.thing': { 'font-size': '14pt', 'letter-spacing': '1em' }
})

让我知道这是否有帮助。为了提高效率，我稍微修改了一下数组

var dummy = [["div", {'color':'red', 'background': 'red'}], 
             ["span", {'color':'red', 'background': 'red'}],
             ["li", {'color':'red', 'background': 'red'}]]
var cssFunction = function (items) {
        $.map(items, function(item){
             $(item[0]).css(item[1]);
        });
    };
cssFunction(dummy);

尽管您可以直接使用jquery应用css:

$(selector).css({color:"red",background:"black"})

这里有一个你想要的例子

http://jsbin.com/molifece/2/edit

相关文章：