Javascript 多框設計

Question

我正在使用 jQuery 編寫一個腳本來向網頁添加多個控制框（div）。 這些 div 包含控件（錨點），如關閉、上一個、下一個、搜索等。代碼示例：

$div_overlay = 
    $('<div></div>')
    .addClass('overlay')
    .append($('<div></div>')
        .addClass('text_controls')
//The onClick method below works perfect but not .click() of jQuery(due to the way 'index' is used)
        .append($('<a onClick="overlay_hide('+index+'); return false;"></a>')
            .addClass('close')
            .attr('href','#')
            /*.click(function(){
//The 'index' gets incremented as divs are created and hence a wrong value(the last one) is passed irrespective of the div clicked 
            overlay_hide(index)
            })*/
        )

'index' 是一個全局變量，用於跟蹤創建的 'overlay' div。 它隨着 div 的創建而遞增，並且每個 div 在創建時都被推入一個數組中。 所以，'index' 基本上是一個 div 的數組索引。

為了簡單起見，我只添加了“關閉”錨點。 $div_overlay位於每次單擊圖像時調用的函數中。

我的問題是處理像“關閉”這樣的錨點的點擊事件。 我想使用作為全局變量的“索引”來識別單擊錨點的 div。

我希望能夠傳遞對執行關閉操作的 div 的引用。 如果我使用上面代碼中注釋的 jQuery click 方法來關閉 div，它會將最后一個索引值作為參數傳遞給overlay_hide() （因為索引隨着 div 的創建而增加）。 如果我使用上面的 onClick 方法，它可以通過傳遞正確的索引值來正常工作。

那么，如何使用索引識別這些 div 並能夠根據單擊的 div 控件來唯一地訪問它們？ （可能需要使用對象，但我不確定。）

一種方法是獲取單擊的錨點的父級，但我不想這樣做並且想使用索引。

Answer 1

您可以使用數據屬性將元數據添加到錨點。

$('<a data-index="' + index + '"></a>').click(function(){
    var data = $(this).data();
    overlay_hide(data.index); // note index will be a string
    return false;
});

另一種方法是關閉 click 函數：

$('<a />').click(function(i){
    return function(e){
        // use i here this is the callback.
        overlay_hide(i);
        return false;
    };
}(index)); 

我還想指出，您添加了一個 id .attr('id','overlay') - 並且 id 在整個 DOM 中必須是唯一的。

Answer 2

您應該閱讀 JS 中的閉包和范圍： http : //bonsaiden.github.com/JavaScript-Garden/#function.closures

快速解決您的問題：

var closeButton = (function(index){
    return $('<a></a>').addClass('close').attr('href','#').click(function(){
        overlay_hide(index);
    })
})(index);
var $div_overlay = $('<div></div>').attr('id','overlay').append(
    $('<div></div>').addClass('text_controls').append(closeButton)
)

Answer 3

使用容器上的“覆蓋”類會容易得多：

$('body').delegate('a.close', 'click', function() {
  $(this).closest('div.overlay').hide();
});

只需將其設置為其他類型的控件，然后您就不必擔心在添加的標簽中粘貼那些丑陋的 DOM0 處理程序。

我知道你說過你“不想那樣做”，但除非你能解釋為什么這樣的練習通常是有價值的，否則不推薦最明顯的解決問題的方法似乎是不道德的。

Answer 4

我認為您需要使用 live() 函數，請閱讀：

http://api.jquery.com/live/