jquery - JQuery自动化功能不同项目

Question

我在 every 之前创建了一个带有图标的小菜单<li>，该图标只是一个用 css 定位的图像。所以你会得到一个按钮，<li>首先是图标，然后是图标“Home”，例如。

当您悬停 a<li>时，图标会变大并从黑色图像变为白色图像。这是JS：

$(document).ready(function(){
    $(".ca-menu li:nth-child(1)").hover(
    function(){
        $(".icon").attr('src',"images/home2.png");
        $(".icon").stop().animate({width:32,height:32,marginLeft:-8,marginTop:-8}, 200 );

    },
    function(){
        $(".icon").attr('src',"images/home.png");
        $(".icon").stop().animate({width:16,height:16,marginLeft:0,marginTop:0}, 200 );

    });
});

如您所见，这仅适用于<ul>. 现在我不想为菜单中的 4 个链接复制粘贴 4 次。有没有办法可以自动化这个？你能做一个从 1 到 4 的循环，我可以放入nth-child(i). 有没有办法自动选择图片来源？（它们都在地图图像中，但它们的名称不同：home.png，about.png，contact.png，...）

Answer 1

$(document).ready(function(){
    $(".ca-menu li").hover(
    function(){
        $(this).find(".icon").attr('src',"images/home2.png").stop().animate({width:32,height:32,marginLeft:-8,marginTop:-8}, 200 );

    },
    function(){
        $(this).find(".icon").attr('src',"images/home.png").stop().animate({width:16,height:16,marginLeft:0,marginTop:0}, 200 );

    });
});