反轉功能或效果

Question

我有下面的代碼，我無法弄清楚如何反轉功能。 我想回到它開始的地方。第一個圖像。 任何人都可以幫忙嗎？

<div id="pin_point"> 
<img src="images/pin_point.png" style="position:absolute;"/> 
<img src="images/pin_point_black.png" style="position:absolute;display:none;"/> 
</div> 



$(function() { 
$("#pin_point").hover(function() { 
    $("#pin_point img").fadeToggle('medium'); 
}); 
$("#pin_point").click(function() { 
    $("#pin_point img").attr('src', 'images/ex.png'); 
}); 
}); 

Answer 1

您可以枚舉兩個圖像，然後只需設置自己.src和顯示狀態回到初始狀態。

var imgs = $("#pin_point img"); 
imgs.eq(0).attr("src", "images/pin_point.png").show(); 
imgs.eq(1).attr("src", "images/pin_point_black.png").hide(); 

如果你想點擊重置它，您會在單擊處理程序改成這樣：

$("#pin_point").click(function() { 
    var imgs = $("#pin_point img"); 
    imgs.eq(0).attr("src", "images/pin_point.png").show(); 
    imgs.eq(1).attr("src", "images/pin_point_black.png").hide(); 
});