防止'点击'事件发射多次+问题与褪色

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/