Используйте путевые точки для добавления одного и того же класса для нескольких элементов

#jquery #constants #viewport #jquery-waypoints #waypoint

Вопрос:

Я хочу использовать путевые точки jQuery для добавления класса к элементу, когда он виден в окне просмотра. Нацелиться на один элемент просто, но я не могу понять, как его использовать с несколькими элементами. Это должно быть что-то вроде этого:

 $(function() {
    const MyVariable = [
        'main.home section.blocks .text', 
        'main.page ul li',
        'main.contact .header div',
        'etc etc',
    ];
    
    $(MyVariable).waypoint(function() {
        $(this.element).addClass('animate');
    }, { 
        offset: '100%'
    });
});
 

Спасибо за помощь!

Ответ №1:

Вам не нужно хранить селекторы в массиве. Ты можешь сделать это вот так :

 $('.selector1,.selector2,.selector3').waypoint(function() { ...}
 

Или сделать это так, как вы сделали (с массивом), но вам нужно обойти их с помощью цикла for:

 $(MyVariable).each(function(){
var self = $(this);
 $(this).waypoint({
         handler: function(){
             self.addClass('animate');
         }
    });
})
 

Я не уверен на 100%, потому что я его не тестировал, но я надеюсь, что он будет полезен или даст вам рекомендации.

Комментарии:

1. Спасибо за вашу помощь, Тодор. Да, первые опции работают, но мне нужно добавить функцию путевых точек для множества элементов. Итак, для общего обзора и правильного кода я хочу поместить каждый элемент в другое правило. Я попробовал ваш пример с массивом, но, к сожалению, он не работает. Есть еще какие-нибудь мысли?