하지만 터치 스 와이프 한

Question

그래서 내가 INT 4 클래스를 여러 섹션으로 하나 개의 큰 기사를 가지고 있지만 깨진 사이트를 짓고 있어요 제목, Book1을, BOOK2, & Book3는 내가 원하는 슬쩍하고 display:none을 제외한 모든 것을 스 와이프하고 스 와이프하여 다시 할 수 있습니다. Hammer.js atm을 사용하려고하는데 작동하지 않는 것 같습니다. 제목이 클래스로 시작한 다음 책을 스 와이프하여 다른 책을 숨겨야합니다. (그리고 다시 정상으로 이동하는 방법을 알아야합니다.하지만 더 쉬운 해결 방법이라고 확신합니다.).

HTML

<article> 
<section class='title'> 
</section> 
<section class='book1'> 
</section> 
<section class='book1'> 
</section> 
. 
. 
. 
<section class='book2'> 
</section> 
<section class='book2'> 
</section> 
. 
. 
. 
<section class='book3'> 
</section> 
<section class='book3'> 
</section> 
</article> 

JS

$(document).ready(function() { 
    $(".title").hammer().on(swipeleft, function(event){ 
     $('.book1').css("display", "block"); 
     $('.title').css("display", "none"); 
    }); 
    $(".book1").hammer().on(swipeleft, function(event){ 
     $('.book2').css("display", "block"); 
     $('.book1').css("display", "none"); 
    }); 
    $(".book2").hammer().on(swiperight, function(event){ 
     $('.book1').css("display", "block"); 
     $('.book2').css("display", "none"); 
    }); 
    $(".book2").hammer().on(swipeleft, function(event){ 
     $('.book3').css("display", "block"); 
     $('.book2').css("display", "none"); 
    }); 
    $(".book3").hammer().on(swiperight, function(event){ 
     $('.book2').css("display", "block"); 
     $('.book3').css("display", "none"); 
    }); 
}); 

CSS

.book1, .book2, .book3 {display:none;} 

Answer 1

당신은 데이터 - 단순화 속성을 사용할 수 이 ? 디스플레이 없음 및 설정 데이터 leftitem : 블록

<section class='book2' data-leftitem="book1" data-rightitem="book3"> 
</section> 

그럼 JS에 디스플레이하는 발신자 세트 swipeleft이라면. 마찬가지로 데이터 - 권한 항목을 사용하는 swiperight와 마찬가지로