帶（的onclick）「選擇項」圖片src改變

Question

我想在jQuery中建立一個菜單，懸停和選擇的狀態... 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'); 
}); 

---

不要忘記分號;最後一句話！