如何使turn.js页面“可点击”

Question

我目前正与turn.js合作创建一个翻盖簿。目前，我正在努力弄清楚如何使页面可点击，以便当您在页面上悬停时，页面将更改为下一页或前一页。

到目前为止，我已经尝试过搜索具有类似问题但没有运气的主题，我还检查了turn.js的正式文档，但到目前为止，没有。问题是:是否有一种方法可以选择页面并给它们类(如.previous或.next )以获得所需的效果？

HTML

<div class="container">
    <div id="flipbook">
        <div class="hard">Headline</div>
        <div class="hard"></div>
        <div>Chapter 1</div>
        <div>Chapter 2</div>
        <div>Chapter 3</div>
        <div>The End</div>
        <div class="hard"></div>
        <div class="hard"></div>
    </div>
</div>

Jquery

$( ".container" ).click(function() {
  $("#flipbook").turn("next");
});

$( ".container" ).click(function() {
 $("#flipbook").turn("previous");
});

由于我已经将翻盖簿包装成一个容器，我目前正在为这两个事件选择一个容器，我试图实现的是，当您单击书的左侧时，它切换到前一页，当我单击右侧时，它切换到下一页。

Answer 1

使用turn.js创建触发器时，每个页面都有.odd或.even类。

您可以使用它创建一个单击事件，以便转到下一页或上一页：

$('#flipbook .even').each(function() {
   $(this).parents().eq(1).click(function() { $("#flipbook").turn("previous") });
}) 

$('#flipbook .odd').each(function() {
   $(this).parents().eq(1).click(function() { $("#flipbook").turn("next") });
})

Answer 2

我正在处理128页动态加载的翻盖书，它需要一个及时的事件绑定，因为遍历页面可能效率较低。因此，在更广泛的范围内，我使用了这个。

$(function() {

  $(document).on("click", "#flipbook .even", function(event) {
     $("#flipbook").turn("previous");
  });

  $(document).on("click", " #flipbook .odd", function(event) {
     $("#flipbook").turn("next");
  });

});

这将自动绑定到新创建的页面，并避免了有一个循环的需要。