JQuery слайдер помощь на Скрытие и отображение элементов DIV

Question

Я довольно ржавый на JQuery и передний конец в общем, я пытаюсь получить слайд влево эффект:

1) эффективно скрыть DIV элемент изображения, затем отобразите форму на своем месте

2) swiping right скрывает форму и возвращает изображение.

В настоящее время я использую базовый код, чтобы лучше понять, как работает hide/show в отношении прокрутки влево и вправо.

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

Примечание: Возможно, потребуется настроить «найти» логику, чтобы быть более конкретным, если потребности быть в зависимости от того, что братьев и сестер ваш ящик имеет.