jQuery的問題，功能重複

Question

我有兩個縮略圖在<a>標籤通過點擊它們的另一幅圖像（主圖像）src將更改爲<a> hrefs標記以顯示原圖。

該功能起作用，但問題是，當我跟蹤功能它會重複點擊次數。

如果它的第一次點擊運行一次，如果它的第二次點擊運行兩次等等。這裏是我的代碼：

<div class="wraptocenter"><img alt="" src="" id="myim" /></div> 
    <a href="images/cam1.jpg" class="changemimg"> <img alt="" src="images/10.jpg" /></a> 
    <a href="images/cam.jpg" class="changemimg" ><img alt="" src="images/9.jpg" /></a> 
    <img src="" id="hiddenimg" style="display:none" /> 



$(document).ready(function() { 
    $(".changemimg").bind('click', set); 
    function set() { 
     $("#myim").attr("src", "images/indicators.gif"); 
     var path = $(this).attr("href") 
     $("#hiddenimg").attr("src", path); 
     $("#hiddenimg").load(function() { alert('hi'); $("#myim").attr("src", path); }); 
     return false; 

    } 
}); 

在此先感謝您的任何建議！

Answer 1

嘗試：

$(document).ready(function() { 
    $(".changemimg").bind('click', set); 

    function set(e) { 
     e.preventDefault(); 

     $("#myim").attr("src", "images/indicators.gif"); 
     var path = $(this).attr("href"); 
     var myimg = new Image(); 
     $(myimg) 
      .load(function(){ 
       alert('hi'); 
       $('#myim').attr('src', path); 
      }) 
      .attr('src', path); 
    } 
}); 

這裏是 「hiddenimg」 元素上的demo

Answer 2

你的Load事件處理程序設置每次錨元素被點擊。因此，每次單擊後，Load事件處理程序的數量都會增加一個。 以下代碼可以解決您的問題

$(document).ready(function() { 
     var path; 
     $(".changemimg").bind('click', set); 
     $("#hiddenimg").load(function() { 
      alert('hi'); 
      $("#myim").attr("src", path); 
     }); 
     function set() { 
      $("#myim").attr("src", "images/Calendaricon.gif"); 
      path = $(this).attr("href"); 
      $("#hiddenimg").attr("src", path); 
      $("#hiddenimg").attr("style", "display:block"); 
      return false; 
     } 
    });