Question

我正在尝试使用悬停和选定状态在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)
        })

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

提前致谢，

克里斯

Answer 1

此

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

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

更好：通过将函数传递给.attr()：

来设置新属性

$(".menu_icon").attr("src", function(i, src) {
    return src.replace("_click.png",".png");
});

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

$("#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');
});

最后不要忘记分号;！

jQuery菜单（onclick）“选中项目”图像src更改

1 个答案: