Как сделать страницы 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");
  });

});

Это автоматически привязывается к вновь созданным страницам, а также позволяет избежать цикла.