如何通过增量创建next / prev链接?

时间:2014-10-28 16:11:08

标签: php html dreamweaver

我希望在我的页面上有下一个链接,以便查看下一集。我希望通过增量来做到这一点。我有这个,但不起作用。

<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>

我应该先确定当前页面的文件名吗?

1 个答案:

答案 0 :(得分:2)

使用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变为sample-1.php。拆分时会产生数组['sample', '1.php']。然后,当您尝试使用乘法运算符1.php*转换为数字时,它当然会返回NaN。所以你应该在这种情况下使用parseInt来正确提取数字部分。

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