全局變量的函數

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元素，因爲分配只發生一次。