Question

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

假设我创建了一个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'});

有人可以教我正确的方法吗？我尝试过搜索，但不知道我是否使用正确的术语将其称为“处理程序”。

请建议。谢谢。

Answer 1

如果这有帮助，请告诉我。为了提高效率，我对数组进行了一些修改 -

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

Answer 2

您可以执行以下操作（根据您的说明）：

// @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。

更新：受@ 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' }
})

Answer 3

虽然您可以直接使用jquery来应用css：

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

这是你想要的一个例子

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

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

3 个答案: