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 можно прочитать здесь.

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

Sui_Caed
  • 3
  • Посмотрите вот этот ответ. https://ru.stackoverflow.com/questions/614911/%D0%97%D0%B0%D0%BC%D1%8B%D0%BA%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B2-javascript?noredirect=1&lq=1 – Stepan Kasyanenko Oct 09 '17 at 03:44

1 Answers1

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)
}
Gordio
  • 629