Question

我对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/

我遇到的问题是，向左滑动以隐藏作品，但向右滑动以显示无效。

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

Answer 1

在您向左滑动隐藏它之后，它将被隐藏，因此无论如何都无法捕捉向右滑动。

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

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

注意：您可能需要调整＆＃34;发现＆＃34;如果需要取决于你的盒子里有什么兄弟姐妹，那就更具体了。

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

1 个答案: