jQuery 滑块帮助隐藏和显示 div 元素答案

【问题标题】：jQuery slider help on hiding and showing div elementsjQuery 滑块帮助隐藏和显示 div 元素
【发布时间】：2015-11-11 02:34:04
【问题描述】：

总的来说，我对 jQuery 和前端相当生疏，我试图获得向左滑动的效果：

1) 有效地将 div 元素隐藏为图像，然后在其位置显示表单

2) 向右滑动隐藏表单并返回图像。

我目前正在使用基本代码来更好地了解隐藏/显示与左右滑动相关的工作原理。

HTML：

<div class="box"></div>

jQuery 代码：

 $(function(){
    $("div.box").on("swipeleft", swipeleftHandler);
    $("div.box").on("swiperight", swiperightHandler);

    function swipeleftHandler(event){
        $(event.target).addClass("swipeleft");
        $(this).hide();
    }

    function swiperightHandler(event){
        $(event.target).addClass("swiperight");
        $(this).show();
    }
});

这是jsfiddle上的基本代码：https://jsfiddle.net/avas9eb3/

我遇到的问题是，向左滑动隐藏作品，但向右滑动显示什么都没有。

而且它只工作一次，需要刷新页面。

【问题讨论】：

标签： jquery swipe show-hide

【解决方案1】：

当你向左滑动隐藏它后，它会被隐藏，所以你无论如何都无法捕捉到向右滑动。

因此，我可能会考虑将处理程序放在您要连接的框的父元素上。然后就可以在handler中找到后代元素了。

$(function(){
    $("div.box").parent().on("swipeleft", swipeleftHandler);
    $("div.box").parent().on("swiperight", swiperightHandler);

    function swipeleftHandler(event){
        $(event.target).addClass("swipeleft");
        $(this).find("div.box").hide();
    }

    function swiperightHandler(event){
        $(event.target).addClass("swiperight");
        $(this).find("div.box").show();
    }
});

注意：如果需要取决于您的盒子有哪些兄弟姐妹，您可能需要调整“查找”逻辑以更具体。

【讨论】：