防止"点击"事件多次触发+褪色问题

Question

早上好.我正在制作一个简单的jQuery画廊的问题.它允许用户通过一些按钮循环浏览一组图像,同时在计时器上旋转这些图像.我的问题是用户能够多次点击该按钮,将淡入淡出的动画排队并反复重复,例如用户点击按钮5次>相同图像淡入/淡出5次>图库移动到下一张图像.

我尝试过使用:

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

触发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很新,我想学习一些东西,而不是使用一些现成的代码.

任何帮助,非常感谢.

谢谢

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/