javascript - 为什么我使用 jQuery 添加类后单击不起作用?
问题描述
我点击了一些div。当我点击它们时,点击要么不起作用,要么立即不起作用。
我有一个旋转木马。轮播具有由 css 类确定的背景图像。轮播中也有 div 有一个类。我将一个淡入淡出类附加到内部 div 以提供交叉淡入淡出效果。这行得通。
如果我在页面加载后立即单击 div,一切正常。但是,在第一个轮播周期完成后,如果确实如此,我必须在单击之前多次单击 div。
经过大量试验和错误,我确定“.addClass('fadein')”会导致问题。删除它会在第一次尝试时恢复我的点击次数。
这对我来说很奇怪,因为我没有将它添加到任何点击中。
这是我的代码片段。我的 HTML:
<div id="slider-wrapper" class="videos-set-1">
<div id="ss-video-1" class="video-selection video-display-top"></div>
<div id="ss-video-2" class="video-selection video-display-left"></div>
<div id="ss-video-3" class="video-selection video-display-right"></div>
</div>
我的CSS:
#slider-wrapper.fadein.videos-set-3 .video-display-top,
#slider-wrapper.fadein.videos-set-3 .video-display-left,
#slider-wrapper.fadein.videos-set-3 .video-display-right {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
还有我的 jQuery:
var activeIndex = 0;
var play;
var carouselItems = $('#slider-wrapper .video-selection');
var panelsTotal = carouselItems.length;
var videoGallery = $('.container-videos');
var animateScreensaver = true;
$(function() {
function animateCarousel(n) {
if(!animateScreensaver) return;
if((n > activeIndex && n < panelsTotal) || (n < activeIndex && n >= 0)) {
if(carouselItems.eq(n)) {
$('#slider-wrapper').removeClass().addClass('videos-set-' + (n+1)).addClass('fadein');
}
}
setTimeout(function () {
$('#slider-wrapper').removeClass('fadein');
}, 3000);
activeIndex = n;
}
function playScreensaver() {
animateScreensaver = true;
play = setInterval(function() {
if(activeIndex >= panelsTotal-1) {
animateCarousel(0);
} else {
animateCarousel(activeIndex+1);
}
}, animateDuration);
}
function showScreensaver() {
animateScreensaver = true;
playScreensaver();
}
function playVideo(video) {
// play video stuff
}
var autoStart = setTimeout(function() {
playScreensaver();
});
$('.video-selection').on('click', function() {
var thisVideo = $(this).attr('id');
if(!animateScreensaver) {
showVideoGallery(thisVideo);
} else {
animateScreensaver = false;
playVideo(thisVideo);
}
});
})
我想保持交叉淡入淡出,但是,在尝试解决这个问题几个小时后,我准备不使用了。我通读了其他 SO 答案,但它们似乎与我的问题不同,因为它们正在向点击处理程序添加一个类,而我不是。
如果有人能指出我正确的方向,我可以从那里开始。
谢谢。
解决方案
我不确定我的解决方案能否解决您的问题。但是根据我的经验,Jquery 的点击事件必须写在就绪事件中。
例子:
//this is ready event
$(document).ready(function() {
//add your click function here
});
推荐阅读
- vue.js - CORS 策略阻止对 API 的 POST 请求
- windows - 配置 git/ssh 以访问 bitbucket 导致密钥文件被拒绝 - 格式错误?
- macos - 在 PC 中未检测到 Beaglebone black
- python - 如何获取写入文本文件的函数?
- sql - 使用标准 sql,如何将时间戳转换为 unix 时间?
- pandas - Pandas Dataframe Apply - 附加到列表的 lambda 函数
- python-3.x - 在 Tkinter 中查看需要用户输入的功能并与之交互
- salesforce - 前 4 个字符的模式匹配 SOQL?
- git - 如何删除分支名称中带有奇怪字符的本地 git 分支
- vim - Vim 状态行分隔 (%=) 与 Unicode 字符