jquery - 同时使用2个变量

Question

我该如何去做呢？

$(function() {

   var foo = $('#foo'),
       bar = $('#bar');

    $('body').click(function() {

        $(foo,bar).css({color: 'red'}); 

    });

});

演示:http://jsfiddle.net/each/RGZ4Z/ - 只有 foo 变红

编辑:我可以强调这样一个事实:我知道我可以轻松做到:

$('#foo,#bar').css({color: 'red'});

我只是询问变量的用法...

Answer 1

也许，您想要的是这样的:

foo.add(bar).css({color: 'red'});

下面是一段演示代码，展示了它是如何工作的:http://jsfiddle.net/jfriend00/3Ep6J/ .

根据您的需求，我可以想到三种选择:

1. var items = $('#foo, #bar')
2. $('#foo, #bar').css({color: 'red'});
3. foo.add(bar).css({color: 'red'});

并且，每个选项的更多详细信息:

1) 您可以在一开始就创建一个 jQuery 对象，其中包含两组对象，如下所示:

var objs = $('#foo, #bar');

然后执行以下操作:

objs.css({color: 'red'}); 

2)或者一次性完成所有操作:

$('#foo, #bar').css({color: 'red'}); 

3) 或者，如果您已经有单独的 foo 和 bar jQuery 对象，您可以将一个 jQuery 对象中的项目添加到另一个 jQuery 对象中，然后执行您的操作:

var foo = $('#foo'),
    bar = $('#bar');

然后，执行以下操作:

foo.add(bar).css({color: 'red'}); 

注意:有点违反直觉，选项 3) 不会修改 foo jQuery 对象，add 方法返回一个新的 jQuery 对象，其中包含 bar< 中的项目 添加到其中。