如何在调整大小事件中重新初始化 HammerJS？

Question

我的问题是当我触发选择器重置的调整大小事件时，使用 jQuery 匹配容器 $('.container') 将一直 return 索引为 0。 . 在文件准备好之前它工作。

$('.container') 出现不止一次，因此它应该在滑动事件中递增。

有人有什么想法吗？

$(document).ready(function() {
    mobileCalculus(animation);
    swipeActions( $('.home-element-wrapper'), $('.home').width());

    $(window).on('resize', function() {
        mobileCalculus(animation);
    });
});


function swipeActions(parent, offset) {
    var curInd = 0;
    var theThumb = $('.thumb');
    var myElement = document.getElementById('main-swipe');
    var max = theThumb.length - 1;

    // create a simple instance
    // by default, it only adds horizontal recognizers
    var mc = new Hammer(myElement);

    // listen to events...
    mc.on("swipeleft", function(ev) {

        curInd = $('.thumb.active').index() + 1;
        if (curInd > max) {
            curInd = max;
        }
        var newML = offset * curInd;
        theThumb.removeClass('active');
        theThumb.eq(curInd).addClass('active');
        console.log($('.thumb.active').index() + 1);
        parent.css({
            'margin-left': '-'+newML+'px'
        });
    });
    mc.on("swiperight", function(ev) {
        curInd = $('.thumb.active').index() - 1;
        if (curInd < 0) {
            curInd = 0;
        }
        var newML = offset * curInd;
        theThumb.removeClass('active');
        theThumb.eq(curInd).addClass('active');
        parent.css({
            'margin-left': '-'+newML+'px'
        });
    });

}

例如 jquery 有一个名为 .off 的函数，它会停用事件，之后我们可以在选择器上放置一个新事件。

$('element').off('swiperight').on('swiperight')

Answer 1

显然我已经弄明白了。我必须使 var mc = new Hammer(myElement); 值 "global"。显然，当我在 swipeActions() 中第二次重新初始化它时，off() 函数将不起作用，因此只初始化该值一次，然后用它执行 off() 和 on() 就可以了工作。

如何在调整大小事件中重新初始化 HammerJS？

How to reinitialize HammerJS on resize event?

javascript

jquery

resize

hammer.js