«это» в событии swiper - это окно, а не swiper - PullRequest
Новая
       16

«это» в событии swiper - это окно, а не swiper

0 голосов
/ 13 апреля 2020

У меня есть простая страница с несколькими слайдерами. Каждый слайдер состоит из трех слайдов; слева, посередине и справа. Я хочу сбросить все ползунки в середину, если другой будет изменен. Думайте об этом как о пользовательском интерфейсе, где вы проводите пальцем влево или вправо, чтобы показать действия, которые можно выполнить над элементом в списке. Я не хочу, чтобы на нескольких элементах одновременно отображались их действия - поэтому при смахивании одного из них все остальные возвращаются в исходное состояние.

В документации сказано, что в событиях ползунка "this" всегда будет обратитесь к ползунку, о котором идет речь, но по какой-то причине это относится к окну, и я не могу понять, почему.

Вот простой пример этого в действии https://codepen.io/gurubob/pen/MWawvQK 

$(() => {
    var swipers = [];

    function initSwiper(element) {
        var swiper = new Swiper(element, {
            // Optional parameters
            direction: 'horizontal',
            loop: false,
            initialSlide: 1,
            on: {
                slideChange: () => {
                    // The docs say that "this" is always the instance of
                    // the swiper in any events, but here "this" is the
                    // window and I can't spot why????
                    // Change all other swipers back to initial slide:
                    var thisSwiper = this;
                    swipers.forEach(swiper => {
                        if(swiper != thisSwiper) swiper.slideTo(1);
                    })
                }
            }
        })

        swipers.push(swiper);
    }

    $(function(){
        $('.swiper-container').each((idx, element) => {
            initSwiper(element);
        });
    })
})

Можете ли вы определить, что я делаю не так?

1 Ответ

1 голос
/ 13 апреля 2020

Это потому, что вы используете функцию стрелки в качестве значения свойства slideChange в параметрах, передаваемых Swiper.

Функция стрелки использует родительскую область вместо новой: Функции стрелок MDN

Вы можете просто использовать переменную swiper вместо this: 

slideChange: () => {
                    swipers.forEach(swiperItem => {
                        if(swiper != swiperItem) swiperItem.slideTo(1);
                    })
                }

Другой вариант - добавить прослушиватель событий отдельно: 

var swiper = ...;
swiper.on('slideChange', () => ...)
...