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/

Answer 4

类似于Delan的解决方案，但使用jQuery并且没有使用测试。 http://jsfiddle.net/GZ26j/

$('#next').on('click', function(e) {
    e.preventDefault();
    href = $(this).attr('href');
    var n = href.split('-')[1] * 1 + 1;
    n = n%5;
    e.target.href = href.split('-')[0] + '-' + n;
});

修改该解决方案使计数器从0开始而不是1

Answer 5

使用隐藏字段来保存值，使用onclick函数来增加它并提交表单。见：How can I increase a number by activating a button to be able to access a function each time the button is increased?

 <?

 if(!isset($_GET['count'])) {
  $count = 0;
  } else {
  $count = $_GET['count'];
  }

  ?>

   <script type='text/javascript'>
   function submitForm(x) {
     if(x == 'prev') {
     document.getElementById('count').value--;
     } else {
     document.getElementById('count').value++;
     }

     document.forms["form"].submit();
   }
   </script>

   <form action='hidfield.php' method='get' name='form'>
   <input type='hidden' name='count' id='count' value='<?php echo $count; ?>'>
   </form>

   <input type='submit' name='prev' value='prev' onclick="submitForm('prev')">
   <input type='submit' name='next' value='next' onclick="submitForm('next')">

将href值递增一（Javascript）

5 个答案: