关于隐藏和显示div元素的jQuery滑块帮助

一般来说，我对jQuery和前端非常生疏，我正试图获得一种幻灯片效果：

1） 有效地隐藏图像中的div元素，然后在其所在位置显示表单

2） 向右滑动隐藏窗体并返回图像

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

HTML:

这是JSFIDLE上的基本代码：

我遇到的问题是，向左滑动以隐藏作品，而向右滑动以显示作品则毫无用处

---

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

用左键隐藏后，它将被隐藏，因此您无法捕获右键

因此，我可能会考虑将处理程序放在您正在钩住的框的父元素上。然后可以在处理程序中找到子元素

$(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();
    }
});

注意：如果需要根据您的箱子有哪些同级，您可能需要调整“查找”逻辑，使其更加具体

 $(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();
    }
});

$(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();
    }
});