1

我有一个列表，当我将鼠标悬停在它们上面时，我想更改它的内容。为什么这不起作用？我可以将 id 用作选择器，它会触发悬停功能，但随后列表项都会改变颜色，而不仅仅是我想要的颜色。我也不能使用个人 ID，因为它们是动态创建的。这是相关jquery的片段。

for (var i=0;i < count; i++)
    {   
        if (i == 4) {break;}
        var elemId = resultsTemp[i].split('.')[0];
        var elemName = resultsTemp[i].split('.')[1];                
        addToList += '<li id="'+elemId+'" class= "profResultsName">'+elemName+'</li>';
    }
        $("#professorDropDown").append(addToList);

这是另一个

$(".profResultsName").hover(function() 
{
    $(this).css("color","white");
},
function () 
{
    $(this).css("color","black");
});

这是相关的html。

<ul id="professorDropDown" class="addContainer"></ul>
4

3 回答 3

1

好吧，你应该使用：

$("#professorDropDown").on('hover', 'li', function () {
    $(this).css("color","white");
});

因为，您正在动态生成列表项，而不是在页面加载时生成。我建议使用类而不是直接通过 JS 应用 CSS 样式。

于 2013-08-25T10:23:24.317 回答
1

动态元素的缺失和处理=似乎存在两个问题class"profResultsName"

for (var i=0;i < count; i++)
{   
    if (i == 4) {break;}
    var elemId = resultsTemp[i].split('.')[0];
    var elemName = resultsTemp[i].split('.')[1];                
    addToList += '<li id="'+elemId+'" class="profResultsName">'+elemName+'</li>';//= missing after class
}
    $("#professorDropDown").append(addToList);

然后

$('#professorDropDown').on('mouseenter', 'li.profResultsName', function(){
    $(this).css('color', 'red')
}).on('mouseleave', 'li.profResultsName', function(){
    $(this).css('color', 'green')
})

演示：小提琴

于 2013-08-25T10:20:06.920 回答
1

请记住，您正在为ul元素添加侦听器，而不是li.

由于 li 是动态生成的，因此请使用以下代码：

for (var i=0;i < 4; i++) {             
    $(".profResults").append('<li  class"profResultsName">item</li>');
    listen();
}

function listen() {
    $(".profResults li").hover(function() {
    $(this).css("color","white");
}, function () {
    $(this).css("color","black");
});
}

示例：http: //jsfiddle.net/Mqfx8/

于 2013-08-25T10:27:21.320 回答