[英]How to add class to only one element that matches condition using jquery?
I'm trying to check if element crossed bottom edge of viewport. 我正在尝试检查元素是否越过视口的底部边缘。 If it did, I want to add class start
to this element. 如果是这样,我想将class start
添加到此元素。 The problem is that when condition is satisfied class adds to all h2
elements. 问题在于,当条件满足时,类将添加到所有h2
元素。
Here is my code: 这是我的代码:
$.fn.checkAnimation = function() {
var context = this;
function isElementInViewport(elem) {
var $elem = context;
// Get the scroll position of the page.
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return (elemTop < viewportBottom);
}
// Check if it's time to start the animation.
function checkAnimation() {
console.log(isElementInViewport($elem));
var $elem = context;
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
context.addClass('start');
}
}
checkAnimation();
return this;
};
$(window).on('scroll scrollstart touchmove orientationchange resize', function(){
$('h2').checkAnimation();
});
You'll need to change your checkAnimation
jQuery plugin to loop through all elements in the jQuery object and process them individually or call your function like this 您需要更改您的checkAnimation
jQuery插件以遍历jQuery对象中的所有元素,然后分别处理它们或像这样调用您的函数
$('h2').each(function(){
$(this).checkAnimation();
}
Here is what I mean by processing the elements individually inside the plugin: 这是我通过在插件内部单独处理元素的意思:
$.fn.checkAnimation = function() {
function isElementInViewport($elem) {
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return (elemTop < viewportBottom);
}
function checkAnimation() {
var $elem = $(this);
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
$elem.addClass('start');
}
}
return this.each(checkAnimation);
};
If you use this version of the plugin you can call it like this: 如果您使用此版本的插件,则可以这样命名:
$('h2').checkAnimation();
It will add the class only to the element that matches the condition not to all the element in the jQuery object you've called the function on. 它将仅将类添加到与条件匹配的元素,而不添加到调用了该函数的jQuery对象中的所有元素。
Should be $elem.addClass('start');
应该是$elem.addClass('start');
instead and remove the var $elem = context;
而是删除var $elem = context;
statement like : 像这样的声明:
function checkAnimation() {
console.log(isElementInViewport($elem));
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
Hope this helps. 希望这可以帮助。
this
inside a jQuery plugin is the jQuery object that contains the whole collection of elements represented by the previous selector/filter. this
jQuery插件内是jQuery对象包含由先前选择器/滤波器表示的元素的整个集合。
In order to treat each element in the collection as an individual instance you need to loop through the initial this
. 为了将集合中的每个元素视为一个单独的实例,您需要遍历初始的this
。
Very basic pattern: 非常基本的模式:
$.fn.pluginName = function(options){
// return original collection as jQuery to allow chaining
// loop over collection to access individual elements
return this.each(function(i, elem){
// do something with each element instance
$(elem).doSomething(); // elem === this also
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.