如何选择在 for 循环中创建的元素？答案

【问题标题】：How to select an element that was created in a for loop?如何选择在 for 循环中创建的元素？
【发布时间】：2014-06-06 14:53:36
【问题描述】：

我已经在我的页面上动态加载了许多元素对。每对都有一个列表中的描述符，以及覆盖在图像上的荧光笔。

我想要的是当用户将鼠标悬停在列表项上时，另一个元素会突出显示。

无论我将鼠标悬停在哪个列表项上，我下面的当前代码只会突出显示 .viewer 中的最后一个元素。

处理此问题的最佳方法是什么？

for (i = 0; i < Ajax.length; ++i) {
    var listid = 'listitem-'+i;
    var mapid = 'mapitem-'+i;

    $('.list').append('<div id="'+listid+'">Lots of Text</div>');
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>');

    $('#'+listid).hover(function(){
        $('#'+mapid).toggleClass('highlight');
    });
}

【问题讨论】：

@susheel - 不需要小提琴。问题解释清楚，所需的所有代码都在上面发布。
它仍然让助手的工作更轻松，所以有一个小提琴总是好的，这样你的问题很快就会得到解决
我不明白为什么有人会对此投反对票。它解释了问题，并且代码 100% 显示了它。我自己和 MrCode 都能够在没有请求的 jsfiddle 的情况下回答它。对这个问题投反对票的人显然不理解这个简单的问题。
如果你想要的话，这里是我上面的代码jsfiddle.net/u2N36

标签： javascript jquery scope closures jquery-hover

【解决方案1】：

mapid 具有在触发悬停事件处理程序时分配给它的最后一个值，因此您需要确保您具有相关值。

尝试将悬停任务放在一个外壳内...

for (i = 0; i < Ajax.length; ++i) {
    var listid = 'listitem-'+i;
    var mapid = 'mapitem-'+i;

    $('.list').append('<div id="'+listid+'">Lots of Text</div>');
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>');

    (function(listid, mapid) {
        $('#'+listid).hover(function(){
            $('#'+mapid).toggleClass('highlight');
        });
    })(listid, mapid);
}

另一种方法是将关联的地图 ID 与列表项一起存储，如下所示...

for (i = 0; i < Ajax.length; ++i) {
    var listid = 'listitem-'+i;
    var mapid = 'mapitem-'+i;

    $('.list').append('<div id="'+listid+'">Lots of Text</div>');
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>');

    $('#'+listid).data("associated-map-id", mapid);

    $('#'+listid).hover(function(){
        $('#'+$(this).data("associated-map-id")).toggleClass('highlight');
    });
}

两者都可以工作，并且它们会给出相同的最终结果。只要选择你喜欢的:)

【讨论】：

这似乎不起作用！我的原始代码：jsfiddle.net/u2N36 和您的代码：jsfiddle.net/QnCL2

【解决方案2】：

将悬停处理程序移动到闭包中，将listid 和mapid 作为参数传递。这会在一个新范围内创建变量，它们不会受到在更高范围内被覆盖的mapid 和listid 的影响。

for (i = 0; i < Ajax.length; ++i) {
    var listid = 'listitem-'+i;
    var mapid = 'mapitem-'+i;

    $('.list').append('<div id="'+listid+'">Lots of Text</div>');
    $('.viewer').append('<div id="'+mapid+'">Here It Is</div>');

    (function(listid, mapid){
        $('#'+listid).hover(function(){
            $('#'+mapid).toggleClass('highlight');
        });
    })(listid, mapid);
}

【讨论】：