同时使用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）你可以创建o NE在中有两组物体的像这样开始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'}); 

注：有些counterintuively，选项3）不修改foo jQuery对象，该add方法返回从bar添加给项目一个新的jQuery对象它。

Answer 2

+1给jfriend00的回答，但我以为我会插话来解释为什么你的工作摆在首位。

的jQuery "constructor"有三个方法签名（基本上）：

1. $(selector[, context])用于创建jQuery对象了现有元素
2. $(html[, ownerDocument])的用于$(document).ready(callback)

创建新元素

$(callback)作为别名

您正在使用第一个选项，并且selector是一个预先存在的jQuery对象（这很好），但是通过添加bar参数，这意味着它将该元素视为上下文。基本上是：“给我一个结果集，其中包含元素bar”中存在的所有元素foo“。

另外，如果你知道你已经有了一个变量jQuery对象，它只是浪费的另一个呼叫包裹，$()。

bar = $('#bar'); 
$(bar).show(); // unnecessary! 
bar.show();  // better! 

要帮我还记得，我总会带有jQuery的变量与$：

$bar = $("#bar"); 
$bar.show(); // less ambiguous! woo!