Javascript 多框设计

Question

我正在使用 jQuery 编写脚本以将多个控制框 (divs) 添加到网页。这些 div 包含控件( anchor )，如关闭、上一个、下一个、搜索等。代码示例:

$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 的数组索引。

为简单起见，我只添加了“关闭” anchor 。 $div_overlay 位于每次单击图像时都会调用的函数中。

我的问题是处理“关闭”等 anchor 的点击事件。我想使用作为全局变量的“索引”来识别点击 anchor 的 div。

我希望能够传递对执行关闭操作的 div 的引用。如果我使用上面代码中注释的 jQuery click 方法关闭 div，它会将最后一个索引值作为参数传递给 overlay_hide()(因为索引随着 div 的创建而递增)。如果我使用上面的 onClick 方法，它可以通过传递正确的索引值正常工作。

那么，我如何使用索引识别这些 div 并能够根据单击的 div 控件唯一地访问它们？ (可能需要使用对象，但我不确定。)

一种方法是获取点击 anchor 的父级，但我不想那样做，而是想使用索引。

Answer 1

您可以使用数据属性将元数据添加到 anchor 。

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

另一种方法是关闭点击函数:

$('<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 中必须是唯一的。