Javascript 如何在JQM网站中将TouchWipe事件用于滑动div

我有一个简单的滑块，用于点击事件。然后我试着在sipe左右添加相同的效果。但我很难做到这一点

这是我创建的

我正在使用swipeTouch插件进行手势

如果有人能用滑动手势更新提琴来达到同样的效果，那将非常有用

脚本

$(".fieldset").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
        // $(this).text("You swiped " + direction );

        if (direction == 'right') {
            console.log("You swiped " + direction);
        }
    }
});

$('ul li.fieldset').each(function () {
    var h = $(this).height();
    var next_height = $(this).next('.hidenset').height();
    var diff = h - next_height;
    console.log('The height of li:' + h);
    $(this).next('.hidenset').css('height', h + 'px');
    $(this).next('.hidenset').css('margin-top', -h + 'px');

});

$(".fieldset a").click(function () {
    parent = $(this).parent('.fieldset');
    $('.fieldset').not(parent).removeClass('left-slide').addClass('right-slide');

    if ($(parent).hasClass('left-slide')) {
        $(parent).removeClass('left-slide').addClass('right-slide');
    } else {
        $(parent).removeClass('right-slide').addClass('left-slide');
    }

    form = $(parent).attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];

    $('.hidenset').not(menu).removeClass('menu-open').addClass('menu-close');

    if ($(menu).hasClass('menu-open')) {
        $(menu).removeClass('menu-open').addClass('menu-close');
    } else {
        $(menu).removeClass('menu-close').addClass('menu-open');
    }

});

$(".fieldset").swipe({
                  swipeLeft: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is open
                if ($(this).hasClass('right-slide')) {

                $(this).find(".anchor1").click();
            }
        },
     swipeRight: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is closed
            if ($(this).hasClass('left-slide')) {
                $(this).find(".anchor1").click();
            }
        }
});

谢谢和问候

给你：

更新

---

检查滑动方向，查看菜单是否已处于适当状态。如果没有，请在字段集中找到按钮并触发单击事件。

基于@ezanker提供的答案

我的答案适用于那些试图使用+

如果我们只使用

swipe:function（事件、方向、距离、持续时间、手指计数）{}

函数，那么它会影响JQM的其他

touch

事件，因为它是

JQuery

的触摸优化版本

脚本

$(".fieldset").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
        // $(this).text("You swiped " + direction );

        if (direction == 'right') {
            console.log("You swiped " + direction);
        }
    }
});

$('ul li.fieldset').each(function () {
    var h = $(this).height();
    var next_height = $(this).next('.hidenset').height();
    var diff = h - next_height;
    console.log('The height of li:' + h);
    $(this).next('.hidenset').css('height', h + 'px');
    $(this).next('.hidenset').css('margin-top', -h + 'px');

});

$(".fieldset a").click(function () {
    parent = $(this).parent('.fieldset');
    $('.fieldset').not(parent).removeClass('left-slide').addClass('right-slide');

    if ($(parent).hasClass('left-slide')) {
        $(parent).removeClass('left-slide').addClass('right-slide');
    } else {
        $(parent).removeClass('right-slide').addClass('left-slide');
    }

    form = $(parent).attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];

    $('.hidenset').not(menu).removeClass('menu-open').addClass('menu-close');

    if ($(menu).hasClass('menu-open')) {
        $(menu).removeClass('menu-open').addClass('menu-close');
    } else {
        $(menu).removeClass('menu-close').addClass('menu-open');
    }

});

$(".fieldset").swipe({
                  swipeLeft: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is open
                if ($(this).hasClass('right-slide')) {

                $(this).find(".anchor1").click();
            }
        },
     swipeRight: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is closed
            if ($(this).hasClass('left-slide')) {
                $(this).find(".anchor1").click();
            }
        }
});

我使用TouchWipe是因为

swipeleft

和

swiperight

JQM的事件在浏览器中没有正确响应

---

希望它能对一些人有所帮助

就这一点发表一点评论。昨天在使用刷卡活动时，我发现了这一点。如果使用

swipe:function（）

则会影响

jqueryMobile

的其他触摸事件。因此，我们应该只使用在我的案例中需要的事件

swiperight:function（）

和

swipelft:function（）

：）