将href值递增1 (Javascript)

Question

我有一份有序的清单

<li id="prev">
    <a href="#fragment-1>Next</a>
</li>

我希望将href值递增到

<a href="#fragment-1">...
<a href="#fragment-2">...
<a href="#fragment-3">...
<a href="#fragment-4">...

当点击下一个时，它应该从4开始停止并返回到1，所以用javascript可以吗？

谢谢

Answer 1

首先给你的链接一个id，让它更容易选择。

然后,

document.getElementById('the_id_here').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;
}, false);

示例：http://jsbin.com/ajegaf/4#fragment-1

Answer 2

不完全是你想要的，但应该足够近，让你指向正确的方向，检查http://jsfiddle.net/pj28v/

<ul id="list"></ul>
<a href="#" id="next">Next</a>​

$(function() {

    var $list = $('#list'),
        count = 4,
        i = 0,
        cur = 0;

    for (; i < count; i++) {
        $list.append('<li><a href="#fragment' + i + '">frag' + i + '</a></li>');
    }

    $('a', $list).eq(0).css('color','red');

    $('#next').click(function(ev) {
        ev.preventDefault();
        cur++;
        if (cur >= count) cur = 0;
        $('a', $list).css('color','blue').eq(cur).css('color','red');
    });
});​

Answer 3

jQuery解决方案：

$(document).ready(function(){

    $('#prev a').click(function(){

        var href = $(this).attr('href');
        var num = parseInt(href.substr(href.indexOf('-') + 1));

        if(num == 4)
        {
            num = 1;
        }
        else
        {
            num++;
        }

        $(this).attr('href', '#fragment-' + num)
    });

});​

http://jsfiddle.net/UYDdB/