带有（onclick）的jQuery菜单；“选定项目”；图像src变化

我试图在jquery中构建一个带有悬停和选中状态的菜单

悬停时，图像将替换为突出显示的版本，我还需要单击菜单项时的选定状态（图像替换为选定版本）

我遇到的问题是，当我单击另一个菜单项时，我想关闭任何其他选定的菜单项，并在选择新菜单项之前将它们返回到原始的src

这是我的尝试…：\

  $("#profile_menu ul li").click(function(){                                            
            $(this).addClass("menu_selected")                      
            var img = $(this).children().children(".menu_icon").attr("src")
            var allimgs = $(".menu_icon").attr("src")
            var selected_state = img.replace(".png","_click.png")
            var normalstate = allimgs.replace("_click.png",".png")
            $(".menu_icon").attr("src",normal_state)
            $(this).children().children(".menu_icon").attr("src",selected_state)
        })

问题是，当我单击下一项时，它会将所有菜单图像更改为同一图像…

提前感谢,

克里斯

这个

$(".menu_icon").attr("src")

将获取第一个匹配元素的图像URL。然后为所有其他图像设置此URL，使所有图像相同

更好：通过将函数传递到

.attr（）

，设置新属性：

您也可以对所选图像执行此操作，这将导致以下代码：

$("#profile_menu ul li").click(function() {
    $(this)
     .addClass("menu_selected")
     .find('.menu_icon').attr('src', function(i, src) {
         return src.replace(".png","_click.png");
     });
    $(".menu_icon").attr("src", function(i, src) {
        return src.replace("_click.png",".png");
    });
    // you might also need
    $(this).siblings().removeClass('menu_selected');
});

---

不要忘记分号

在语句末尾

$("#profile_menu ul li").click(function() {
    $(this)
     .addClass("menu_selected")
     .find('.menu_icon').attr('src', function(i, src) {
         return src.replace(".png","_click.png");
     });
    $(".menu_icon").attr("src", function(i, src) {
        return src.replace("_click.png",".png");
    });
    // you might also need
    $(this).siblings().removeClass('menu_selected');
});