0

Есть 6 div с классом 'slide_icon'. Для каждого из них нужно добавить функцию скролла к определенному элементу (их 6) карусели.

Я могу написать конкретно:

var slide_icons = document.getElementsByClassName('slide_icon');

slide_icons[0].addEventListener('click', function(){
    $('.owl-carousel').trigger('to.owl.carousel', [0, 300]);
});
slide_icons[1].addEventListener('click', function(){
    $('.owl-carousel').trigger('to.owl.carousel', [1, 300]);
});
slide_icons[2].addEventListener('click', function(){
    $('.owl-carousel').trigger('to.owl.carousel', [2, 300]);
});
slide_icons[3].addEventListener('click', function(){
    $('.owl-carousel').trigger('to.owl.carousel', [3, 300]);
});
slide_icons[4].addEventListener('click', function(){
    $('.owl-carousel').trigger('to.owl.carousel', [4, 300]);
});
slide_icons[5].addEventListener('click', function(){
    $('.owl-carousel').trigger('to.owl.carousel', [5, 300]);
});

Но если попытаться сделать всё это через цикл:

var slide_icons = document.getElementsByClassName('slide_icon');

for (var i = 0; i < slide_icons.length; i++){
    slide_icons[i].addEventListener('click', function(){
        $('.owl-carousel').trigger('to.owl.carousel', [i, 300]);
    });
}

Выходит так, что всем блокам 'slide_icon' добавляется функция скролла к первому элементу карусели.

Про события owl carousel можно прочитать здесь.

Собственно, вопросы: "Почему через цикл не работает? Как сделать так, чтобы работало?"

1

1 ответ 1

1

Почему через цикл не работает?

Пример для размышлений:

for (var i = 0; i < 10; i++) {
  setTimeout(() => {console.log(i)}, 100)
}

Рекомендую изучить/повторить:

Замыкания, Перечисления

Как сделать так, чтобы работало?

Так как выполнение кода откладывается (асинхронность JS) то переменная i меняется аж до конца цикла.

for (let i = 0; i < 10; i++) {
  setTimeout(() => {console.log(i)}, 100)
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.