[英]Jquery function is working just on first element, I want to work on all classes
I've created a Jquery function that looks like this我创建了一个看起来像这样的 Jquery function
jQuery(document).ready(function ($) {
var animations = document.querySelectorAll('.slide-up');
for (var i = 0; i < animations.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = animations[i].getBoundingClientRect().top;
var elementVisible = 140;
if (elementTop < windowHeight - elementVisible) {
animations[i].classList.add("active");
}
else {
animations[i].classList.remove("active");
}
}});
The problem is, it is working just on the first class when I'm scrolling down, I want to work on each class.I also try something like:问题是,当我向下滚动时,它只在第一个 class 上工作,我想在每个 class 上工作。我也尝试类似:
jQuery(document).ready( function($){
$('slide-up').each(function($) {
var animations = document.querySelectorAll('.slide-up');
for (var i = 0; i < animations.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = animations[i].getBoundingClientRect().top;
var elementVisible = 140;
if (elementTop < windowHeight - elementVisible) {
animations[i].classList.add("active");
}
else {
animations[i].classList.remove("active");
}
}
});});
But with same results.Any ideas or suggestion about how to apply to all elements that have.slide-up class when I'm scrolling down?但结果相同。当我向下滚动时,关于如何应用于所有具有上滑 class 的元素的任何想法或建议?
Thanks in advance !提前致谢 !
Consider the following.考虑以下。
jQuery(function($) {
var animations = $('.slide-up');
var windowHeight = window.innerHeight;
var elementVisible = 140;
animations.each(function(i, el) {
var elementTop = $(el).position().top;
if (elementTop < windowHeight - elementVisible) {
$(el).toggleClass("active");
}
});
});
This should perform an action on each element.这应该对每个元素执行一个操作。 All code has been switched to jQuery.
所有代码已切换到 jQuery。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.