Как сократить повторяющийся js код?

Question

[Andrey Dontsov]

Добрый день
Как можно сократить js код, который повторяется почти полностью?

jQuery('.caught1').viewportChecker({
		classToAdd: 'anim-point num--1',
		offset: 100
    });

    	jQuery('.caught2').viewportChecker({
		classToAdd: 'anim-point num--2',
		offset: 100
    });

    	jQuery('.caught3').viewportChecker({
		classToAdd: 'anim-point num--3',
		offset: 100
    });

    	jQuery('.caught4').viewportChecker({
		classToAdd: 'anim-point num--4',
		offset: 100
    });

    	jQuery('.caught5').viewportChecker({
		classToAdd: 'anim-point num--5',
		offset: 100
    });

Comments

[Сергей Сергей]

обычно выделяют повторяющиеся части в тело функции, а изменяемые — в аргументы. Попробуйте, должно что-то получиться.

Answer 1

[Виталий Инчин ☢]

Самое бабанальное:

for(var i=1;i<6;i++){
  jQuery('.caught'+i).viewportChecker({
    classToAdd: 'anim-point num--'+i,
    offset: 100
  });
}

А по хорошему, не использовать такую структуру, задать элементам общий класс и data-свойство с индексом или подобную хитрость. Далее, просто перебрать и выставить все как надо.

Comments

[Andrey Dontsov]

Спасибо)

Answer 2

[Дима Паутов]

Посмотреть документацию внимательно!!!!!!!!!!!!!
Дать блокам один класс и этому классу сделать инициализацию плагина. Далее через data атрибуты указывать настройки.

https://github.com/dirkgroenen/jQuery-viewport-che...

Comments

[Andrey Dontsov]

Пробовал удалять класс hidden с помощью data атрибутов, чет не удаляется..

Пробовал и так:
$('.test').viewportChecker({
classToRemove: 'hidden'
});

И так:
$('.hidden').viewportChecker({
classToRemove: 'hidden'
});

И без опции classToRemove

Не знаю что не так, буду учиться, спасибо

[Дима Паутов]

AndreyBLG: дайте тегу html и body height: 100%

[Andrey Dontsov]

Дима Турков: странный баг, даю body height: 100% - перестает работать скролл колесом мыши)

Answer 3

[Сергей]

Написать функцию, принимающую на входе n, и использовать как выше предложили цикл