早晨的人们。我正在制作一个简单的jQuery画廊时遇到问题。它使用户可以通过某些按钮循环显示图像集合,同时在计时器上循环显示这些图像。我的问题是用户能够多次单击按钮,从而使动画中的淡入淡入队列,并一遍又一遍地重复播放,例如用户单击按钮5次>相同图像淡入/淡出5次>图库移动到下一张图像。
我尝试使用:
$('#homeGalleryImage li a').unbind('click');
触发点击事件然后重新绑定之后:
$('#homeGalleryImage li a').bind('click');
完成后,但这只是在单击按钮一次之后就删除了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非常陌生,我想学习一些东西,而不是使用一些现成的代码。
非常感谢任何帮助。
谢谢
您总是可以尝试向元素中添加某些内容以取消点击事件?
例如
$(".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/
如果要确保已注册的事件仅触发一次,则应使用jQuery的one:
。one(events [,data],handler)返回:jQuery
描述:将处理程序附加到元素的事件。该处理程序对于每种事件类型,每个元素最多执行一次。
查看示例:
使用jQuery:https://codepen.io/loicjaouen/pen/RwweLVx
// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);
使用vanilly JS:https://codepen.io/loicjaouen/pen/gOOBXYq
// add a listener that run only once
button.addEventListener('click', once_callback, {capture: true, once: true});