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

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

要么工作，他们会给出相同的最终结果。只需选择您喜欢的内容：）

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

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

2 个答案: