我从数据库中获取数据,并根据匹配数,我想输出以下内容：

 <div id='link_delete_holder' style='position:absolute;left:590px;top:10px'>
            <img id='link_delete' src='images/account_related/icons/link_delete.png'/>
        </div>

我希望该图像在悬停时发生变化,因此我使用以下代码：

$('#link_delete').hover(function(){
    $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
}, function(){
    $(this).attr('src', 'images/account_related/icons/link_delete.png');
    });

现在,问题在于它仅适用于第一条记录(显示的第一张link_delete图像),似乎不适用于其他图像.

解决方法:

如果您要创建动态数据,请不要使用ID来获取它们,因为具有两个具有相同ID的元素不是有效的HTML.使用同名的类,它将正常工作.

<div id='link_delete_holder' style='position:absolute;left:590px;top:10px'>
    <img class='link_delete' src='images/account_related/icons/link_delete.png'/>
</div>

另外,正如Anoop Joshi指出的那样,您不能直接使用$(‘#link_delete’).hover(…);您需要使用一个委托,并使用我在上面所说的内容添加基于类而不是ID的委托,并且应该使用mouseenter和mouseleave,因为这实际上是.hover(func(),func())所做的.

$('.link_delete').on({
    mouseenter: function () {
        $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
    },
    mouseleave: function () {
        $(this).attr('src', 'images/account_related/icons/link_delete.png');
    }    
});

编辑：

添加了一个有效的jsFiddle,该动态创建的图像会在悬停时更改图像,然后在完成悬停后返回.