【turn.js】で任意のページに移動させたい

前提

turn.jsで本のようにめくれるページを制作しています。

実現したいこと

【5ページ目へ】というボタンで5ページ目へ、【7ページ目へ】というボタンで7ページ目へ移動させたいです。
turn.jsのサンプルコードでは「前のページ」「次のページ」ボタンは実装されているのですが、任意のページに移動させる方法をご教授いただけないでしょうか。

turn.jsの「前のページ」「次のページ」はこのようになっています。こちらを「5ページ目へ移動」「7ページ目へ移動」のように変えたいです。

よろしくお願いいたします。

該当のソースコード

html
1<body>
2	<div class="container">
3		<header>
4			<h1>turn.jsサンプル</h1>
5		</header>
6		<main>
7			<div id="katudon_turn">
8				<div>
9				<img src="images/katudon_p1.jpg">
10				</div>
11				<div>
12				<img src="images/katudon_p2.jpg">
13				</div>
14				<div>
15				<img src="images/katudon_p3.jpg">
16				</div>
17				<div>
18				<img src="images/katudon_p4.jpg">
19				</div>
20				<div>
21				<img src="images/katudon_p5.jpg">
22				</div>
23				<div>
24				<img src="images/katudon_p6.jpg">
25				</div>
26				<div>
27				<img src="images/katudon_p7.jpg">
28				</div>
29			</div>
30			<ul>
31				<li>
32					<span id="page05">5ページ目へ</span>
33				</li>
34				<li>
35					<span id="page07">7ページ目へ</span>
36				</li>
37			</ul>
38		</main>
39	</div>
40</body>

my_script.js
1$(function(){
2    $('#page05').click(function(){
3        $('#katudon_turn').turn('page05');
4    });
5    $('#page07').click(function(){
6        $('#katudon_turn').turn('page07');
7    });
8});

turn.js
1  // Turns to the next view
2
3  page05: function() {
4
5    return this.turn('page', Math.min(this.data().totalPages,
6      turnMethods._view.call(this, this.data().page).pop() + 1));
7
8  },
9
10  // Turns to the previous view
11
12  page07: function() {
13
14    return this.turn('page', Math.max(1,
15      turnMethods._view.call(this, this.data().page).shift() - 1));
16
17  },

行動規範の内容に同意します

回答2件

ベストアンサー

html
1<!-- データ属性設定 -->
2<span id="page03" data-page="3">3ページ目へ</span>
3<span id="page05" data-page="5">5ページ目へ</span>

JavaScript
1$('[data-page]').click(function (e) { // data-page属性を持つすべての要素
2  $('#katudon_turn').turn('page', this.dataset.page); // データ属性値（文字列）を渡す
3});