3

私はJQueryに入ろうとしていますが、少し苦労しています。

私がやろうとしているのは、一度に 1 クリックずつ配列を調べて、「次へ」ボタンをクリックするたびに新しいアイテムが表示されるようにすることです。

次のコードを見てみましょう。

$(document).ready(function(){
    var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<stuff.length;i++)
    {
        console.log(stuff[i]);
    }  
});

今、iでwhileループを作成するようなことをどのように考えていましたか 

$("#next").on('click', function(){i++;});

しかし、これはどういうわけか機能しません。比較的簡単な方法でこれを行う方法を私に説明できる人はいますか?

4

5 に答える 5

6

ステートメントを使用してループを実行するforと、イベントに応答するのではなく、すぐに実行されます。

代わりに、クリックするたびに配列をステップ実行する必要があります。これを行うには、クリック関数の外でカウンターを定義し、クリックごとにインクリメント (配列の最後に達した場合はリセット) する必要があります。

サンプルコードは次のとおりです。

$(function () { // this is a shortcut for document ready
    var stuff = ['house', 'garden', 'sea', 'cat'],
        counter = 0;

    console.log(stuff[counter]); // your initial value

    // the next line, of course, assumes you have an element with id="next"
    $('#next').click(function () {
        counter = (counter + 1) % stuff.length; // increment your counter
        // the modulus (%) operator resets the counter to 0
        // when it reaches the length of the array

        console.log(stuff[counter]); // the new incremented value
    });
});

これが役立つことを願っています！

于 2013-05-14T17:34:05.543 に答える
5

コールバックの外側にカウンターを保持し、クリックごとにインクリメントするだけです。

$(document).ready(function(){
    var i = 0;    
    var stuff =["house","garden","sea","cat"]; 
    $("#next").on('click' function(){
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });
});
于 2013-05-14T17:24:08.153 に答える
1 
$(document).ready(function(){
   var currentPos = 0;

   $("#next").click(function()
   {
      currentPos++;
      printThings(currentPos);
   });
});

function printThings(maxLength)
{
   maxLength = maxLength > stuff.length ? stuff.length : maxLength;
   var stuff =["house","garden","sea","cat"];  
    for (var i=0; i<maxLength;i++)
    {
        console.log(stuff[i]);
    }  
}
于 2013-05-14T17:25:13.720 に答える
0

私は反対方向に循環したかった：

$("#prev").on('click', function(){
        stuff.reverse();
         i = (i+1)%stuff.length;
         console.log(stuff[i]);
    });

それは機能しますが、1つの値をスキップします...

于 2014-09-16T13:12:59.727 に答える
-1

フォームにテキスト ボックスを追加します。次に、#next click 関数で配列をループします。ループ中に、配列の値をテキスト ボックスの内容と比較します。一致したら、テキスト ボックスの値をループ内の次の配列値に変更し、ループを終了します。

于 2013-05-14T17:27:11.550 に答える