0

私は順序付けられたリストを持っています

<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でまったく可能ですか

ありがとうございました

4

5 に答える 5

3

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

于 2012-04-13T09:33:55.153 に答える
0

非表示フィールドを使用して値を保持し、onclick 関数を使用して値を増やしてフォームを送信します。参照:ボタンをアクティブにして、ボタンを増やすたびに機能にアクセスできるようにする方法を教えてください。

 <?

 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')">
于 2012-04-13T16:16:46.373 に答える
0

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;
});​

編集： このソリューションは、カウンターを1ではなく0から開始します

于 2012-04-13T09:53:53.250 に答える
0

まさにあなたが望むものではありませんが、正しい方向に向けるのに十分近いはずです.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');
    });
});​
于 2012-04-13T09:40:48.617 に答える
0

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/

于 2012-04-13T09:41:46.097 に答える