防止'點擊'事件發射多次+問題與褪色

Question

早上人。我正在創建一個簡單的jQuery畫廊。它允許用戶通過一些按鈕循環瀏覽圖像集合，同時在定時器上旋轉這些圖像。我的問題是，用戶能夠多次點擊按鈕，這些按鈕在動畫中排隊淡入淡出，並且一遍又一遍地重複它。用戶單擊按鈕5次>同一圖像淡入/淡出5次>圖庫移至下一張圖像。

我已經嘗試使用：點擊事件被觸發

$('#homeGalleryImage li a').unbind('click');

之後再重新綁定：

$('#homeGalleryImage li a').bind('click');

後，它的完成，但這只是按後刪除單擊事件一次按鈕，永遠不會重新綁定到它？

我還試圖通過禁用按鈕：

$('#homeGalleryImage li a').attr('disabled', true);

無濟於事......？

還有一個次要問題，如果您在圖像處於轉換過程中單擊某個按鈕時，下一張圖像會顯示爲「消失」，就好像不透明度已降低一樣？很奇怪......這裏是點擊按鈕的代碼：

var i = 1; 
var timerVal = 3000; 
$(function() { 
    $("#homeGalleryControls li a").click(function() { 
     var image = $(this).data('image'); 
     $('#galleryImage').fadeOut(0, function() { 
      $('#galleryImage').attr("src", image); 
     }); 
     $('#galleryImage').fadeIn('slow'); 
     $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif"); 
     $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif"); 
     i = $(this).data('index') + 1; 
     if (i == 4) { 
      i = 0; 
     } 
     timerVal = 0; 
    }); 
}); 

下面是通過一個定時器圖像週期代碼：

//Cycle through gallery images on a timer 
window.setInterval(swapImage, timerVal); 
function swapImage() { 
    $('#galleryImage').fadeOut(0, function() { 
     var imgArray = ["/Content/Images/Design/gallery placeholder.jpg", "/Content/Images/Design/1.jpg", "/Content/Images/Design/2.jpg", "/Content/Images/Design/3.jpg"]; 
     var image = imgArray[i]; 
     i++; 

     if (i == 4) { 
      i = 0; 
     } 

     $('#galleryImage').attr("src", image); 
     $('#galleryImage').fadeIn('slow'); 
    }); 
    var currentButton = $('#homeGalleryControls li a img').get(i - 1); 
    $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif"); 
    $(currentButton).attr("src", "/Content/Images/Design/btn_checked.gif"); 
} 

我意識到這可能是一個更好的主意，用一個插件，但我對jQuery非常陌生，我想學習一些東西，而不是使用一些現成的代碼。

任何幫助，非常感謝。

Thankyou

Answer 1

您可以隨時嘗試添加某些元素來取消點擊事件？

例如

$(".element").click(function(e) { 

    if ($(this).hasClass("unclickable")) { 
     e.preventDefault(); 
    } else { 

     $(this).addClass("unclickable"); 
     //Your code continues here 
     //Remember to remove the unclickable class when you want it to run again. 

    } 

}): 

你的情況，你可以嘗試加入的點擊進行檢查。

$('#homeGalleryImage li a').attr('data-disabled', "disabled"); 

然後點擊事件

if ($(this).attr("data-disabled" == "disabled") { 
    e.preventDefault(); 
} else { 
    //Ready to go here 
} 

編輯

這裏內部顯示元件的工作示例變得無法點擊。 http://jsfiddle.net/FmyFS/2/