Javascript代码设计帮助

我正在使用jQuery编写脚本,以将多个控制框(divs)添加到网页.这些div包含诸如close,prev,next,search之类的控件(锚).代码示例：

$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)
            })*/
        )

“索引”是一个全局变量,用于跟踪创建的“覆盖” div.
它随着div的创建而增加,并且每个div都在创建时被推入数组中.因此,“索引”基本上是div的数组索引.

为简单起见,我仅添加了“关闭”锚点. $div_overlay在函数中,每次单击图像时都会调用该函数.

我的问题是要处理锚点的点击事件,例如“关闭”.我想使用全局变量“ index”来确定单击锚的div.

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

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

一种方法是让被单击的锚点的父项靠在一起,但我不想那样做,而是想使用索引.

解决方法:

您可以使用data属性将元数据添加到锚点.

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

标签：dom,javascript-events,javascript-framework,javascript,jquery
来源： https://codeday.me/bug/20191208/2092597.html