同时使用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。

Answer 2

+1 jfriend00 的答案，但我想我应该插话解释为什么你的答案首先不起作用。

jQuery“构造函数” 具有三个方法签名（本质上）：

1. $(selector[, context ]) 用于从现有元素中创建 jQuery 对象
2. $(html[, OwnerDocument]) 用于创建新元素
3. $(callback) 作为 的别名$(document).ready(callback)

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

另外，如果您知道变量中已经有一个 jQuery 对象，那么再次调用 $() 就太浪费了。

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

为了帮助我记住，我总是在 jQuery 变量前加上 $ 前缀：

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