javascript - 如何选择在 for 循环中创建的元素？

Question

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

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

下面我当前的代码仅突出显示 .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');
    });
}

Answer 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);
}

另一种方法是将关联的 map 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');
    });
}

两者都会起作用，并且会给出相同的最终结果。只需选择您喜欢的即可:)