全局变量的函数

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

虽然这是一个坏主意海事组织，因为全局变量通常是一个坏主意，特别是当它们被使用时，因为它更容易。更重要的是，如果你的$（'＃title'）不是一个id，因此是一个单一的元素，但可能是一个类$（'。title'）和许多元素，代码不会像它那样工作现在（因为titleEl.css（）的每个引用都会改变该类的所有实例）。这表明全局变量模型是脆弱的。

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