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

我已经在我的页面上动态加载了很多对元素。每一对在列表中都有一个描述符，并在图像上覆盖一个高亮灯

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

下面我的当前代码只突出显示

.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');
    });
}

for（i=0；i

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

for（i=0；i

另一种方法是存储与列表项关联的映射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');
    });
}

for（i=0；i

---

这两种方法都会奏效，并且会产生相同的最终结果。只需选择您喜欢的选项：）

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

for（i=0；i

另一种方法是存储与列表项关联的映射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');
    });
}

for（i=0；i

---

这两种方法都会奏效，并且会产生相同的最终结果。只需选择您喜欢的选项：）

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

for（i=0；i

另一种方法是存储与列表项关联的映射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');
    });
}

for（i=0；i

---

这两种方法都会奏效，并且会产生相同的最终结果。只需选择您喜欢的选项：）

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

for（i=0；i

另一种方法是存储与列表项关联的映射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');
    });
}

for（i=0；i

---

这两种方法都会奏效，并且会产生相同的最终结果。只需选择您喜欢的：）

将悬停处理程序移动到闭包中，将

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

for（i=0；i

将悬停处理程序移动到闭包中，传递

listid

和

ma