如何按增量制作下一個/上一個鏈接？

Question

我想在頁面上有一個下一個鏈接，以查看下一集。 我想逐步做。 我有這個但是不能用。

<p><a id="asdf" href="sample-1">Next</a> 
<script>
document.getElementById('asdf').addEventListener('click', function(e) {
var n = e.target.href.split('-')[1] * 1 + 1;
if (n > 4)
n = 1;
e.target.href = e.target.href.split('-')[0] + '-' + n + ".php";
}, false);
</script>
<div class="div3">
<ul>
<li><a href="sample-1.php">Anohana Ep1</a></li>
<li><a href="sample-2.php">Anohana Ep2</a></li>
<li><a href="sample-3.php">Anohana Ep3</a></li>      
</ul>
</div>

我應該首先確定當前頁面的文件名嗎？

Answer 1

使用parseInt轉換為數字：

document.getElementById('asdf').addEventListener('click', function (e) {
    var n = parseInt(e.target.href.split('-')[1]) + 1;
    if (n > 4) n = 1;    
    e.target.href = e.target.href.split('-')[0] + '-' + n + ".php";
}, false);

說明 。 您的代碼存在的問題是，在第一次單擊href之后， href變成了sample-1.php 。 拆分時會生成一個數組['sample', '1.php'] 。 然后，當您嘗試使用乘法運算符*將1.php轉換為數字時，它當然會返回NaN 。 因此，在這種情況下，您應該使用parseInt ，它將正確提取數字部分。

演示： http ： //jsfiddle.net/1jworgLu/