Jak mogę uczynić mój obecny skrypt obrócić między 3 zdefiniowanymi kolorami lub obrazów, aby zmienić tło organizmu?

Obecnie mam to: http://jsfiddle.net/vgm3e/

<button class="color">click to change color</button>



   $(document).ready(function(){
      $('body').on("click", function(){
         $(this).css({'background' : 'red'});
      });
   });

Ale mam trudności z wymyśleniem logiki, aby obracać się między 3 zdefiniowanymi kolorami lub obrazówami. Doceniam każdą pomoc.

-1
Miura-shi 2 grudzień 2013, 05:51

4 odpowiedzi

Najlepsza odpowiedź

Sprawdź moje skrzypce ... jeśli chcesz http://jsfiddle.net/vgm3e/2/

 $(document).ready(function(){
  var rotate = 0;
  var colors = ["blue","red","green"];
  $('body').on("click", function(){

     $(this).css({'background' : colors[rotate]});
      rotate++;
      if(rotate >= 3){
      rotate = 0;
      }

   });
});
3
StaleMartyr 2 grudzień 2013, 01:56

Coś takiego?

   $(document).ready(function(){
   var ex = 0;

  $('body').on("click", function(){
      ex = (ex+1)%3;
      if (ex == 0) { $(this).css({'background' : 'red'}) }
      else if (ex == 1) { $(this).css({'background' : 'green'}) }
      else { $(this).css({'background' : 'blue'}) }
  });
 });
1
Piotr Wójcik 2 grudzień 2013, 01:55

Proszę bardzo:

$(document).ready(function(){
    var colors = ["red", "blue", "green"];
    var current = 0;
    $('body').on("click", function(){
        $(this).css({'background' : colors[current]});
        if (current >= colors.length - 1) {
            current = 0;
        }
        else { current++ };
    });
});

Wszystko, co musisz zrobić, to upewnić się, że w tablicy kolorów są prawidłowe struny kolorów. Jeśli chciałeś robić obrazy w tle, właśnie zmienisz kolory na adresy URL (w formacie stringi, oczywiście) i zmienić funkcję .CS () w razie potrzeby.

1
TW80000 2 grudzień 2013, 01:55

Spróbuj tego

i=0;
$(document).ready(function(){
      $('body').on("click", function(){
switch (i)
{
case 0:
         $(this).css({'background' : 'red'});
        break;

case 1:
         $(this).css({'background' : 'green'});
        break;

case 2:
         $(this).css({'background' : 'blue'});
        break;
}
i++;
if(i==3)i=0;
      });
   });

http://jsfiddle.net/prollygeek/vgm3e/3/

1
ProllyGeek 2 grudzień 2013, 01:57