0

私は JavaScript/jQuery の初心者です。

同じボタンを複数回クリックすることで、Web ページの複数の背景色を連続的に切り替えることができる効果が得られるかどうか疑問に思っていました。

これは、インターネットで見つけたスクリプトです。

<script>
  $("#change-colour").click(function(){ 
  $("body").css("background-color","red");
  });
</script>

ただし、これを使用すると、背景色を一度しか変更できません。同じボタンをクリックして、背景色を複数回変更したい。例:

クリック >> 赤 >> クリック >> 青 >> クリック >> 緑 >> クリック >> そして赤に戻る

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

4

配列のように色をどこかに保存する必要があります。次のように、インクリメント変数を使用して次の色などを取得します。

var colors = ['red', 'blue', 'green', 'cyan'],
    i = 0;

$("#change-colour").click(function(){ 
    $("body").css("backgroundColor", colors[i++]);
    if (i >= colors.length)
        i = 0;

});​

フィドル

于 2012-12-26T18:13:26.010 に答える
0 
var colours = ['red', 'blue', 'green'];
var colourIndex = 0;

$('#change-colour').click(function () {
    // Get the current colour from the array
    var colour = colours[colourIndex];
    // Set the background colour
    $('body').css('background-color', colour);
    // Move the counter along to the next index
    colourIndex = colourIndex + 1;
    // If the counter is pointing past the end of
    // the array, repoint it at the beginning
    if(colourIndex >= colours.length) {
        colourIndex = 0;
    }
});
于 2012-12-26T18:21:51.910 に答える