Question

你能否包含可以在jQuery中的多个函数中使用的变量，例如：

var self = $(this);
var box = self.parents('.box');

$('#title').click(function()
{
    self.css('background', 'red');
    box.slideDown('slow');
}).dblclick(function()
{
    self.css('background', 'green');
    box.slideUp('slow');
});

因此self和box可以在这些事件函数中使用，所以我不必继续这样做：

$('#title').click(function()
{
    var self = $(this);
    var box = self.parents('.box');

    self.css('background', 'red');
}).dblclick(function()
{
    var self = $(this);
    var box = self.parents('.box');

    self.css('background', 'green');
});

但问题是，是否有可能，如果是这样，你怎么能这样做？

Answer 1

虽然可以访问全局变量，但它们不会包含您所追求的内容，因为this是一个特殊关键字，具有不同的值，具体取决于它的放置位置。在您的示例中，它在全局范围内而不是在每个函数中进行一次评估。

简而言之，您所描述的全局变量并不是一个好主意。相反，您可以链接代码，以便根本不需要创建self变量：

$('#title').click(function()
{
    $(this).css('background', 'red').parents('box').slideDown('slow');
}).dblclick(function()
{
    $(this).css('background', 'green').parents('box').slideUp('slow');
});

Answer 2

你无法做你想做的事，但你可以这样做：

function getBoxes(selector) {
    return $(selector).parents('.box');
}

$('#title').click(function()
{
    getBoxes(this).css('background', 'red');
}).dblclick(function()
{
    getBoxes(this).css('background', 'green');
});

你可以像@ box9一样提到，只是把你的电话连在一起。这就是本质上的作用。您也可以更改上面的功能来处理颜色变化，特别是如果这是您使用它的唯一方法。

function colorBoxes(selector, color) {
    $(selector).parents('.box').css('background', color);
}

$('#title').click(function()
{
    colorBoxes(this, 'red');
}).dblclick(function()
{
    colorBoxes(this, 'green');
});

Answer 3

有可能：

var titleEl = $('#title');
var boxEl = titleEl.parents('.box');

titleEl.click(function()
{
    titleEl.css('background', 'red');
    boxEl.slideDown('slow');
}).dblclick(function()
{
    titleEl.css('background', 'green');
    boxEl.slideUp('slow');
});

虽然这对IMO来说是个坏主意，但因为全局变量通常是一个坏主意，特别是当它们被使用时因为它更容易。

更重要的是，如果你的$（'＃title'）不是id，因此是单个元素，但可能是$（'。title'）类和许多元素，代码就不会像现在一样工作（因为对titleEl.css（）的每次引用都会改变该类的所有实例）。这表明全局变量模型很脆弱。

它也不适合动态添加DOM元素，因为赋值只发生一次。

可以在多个jQuery函数中使用的全局变量

3 个答案: