JQuery click Funktionsreihenfolge

Question

Ich würde gerne wissen, wie kann ich das Hintergrundbild eines anderen div-Elements ändern, wenn ich darauf klicke. Ich würde gerne Bilder hintereinander sehen, aber was ich bekomme, ist der letzte. Hier ist ein Code:

$(document).ready(function() { 
    // console.log('ready!'); 

    $('.right').click(function() { 
     $('.zur-gda-img').css('background','url(images/sail-boat.jpg)'); 
    }).click(function() { 
     $('.zur-gda-img').css('background','url(images/sad_ostateczny.jpg)'); 
    }) }).click(function() { 
     $('.zur-gda-img').css('background','url(images/twierdza_wisloujscie.jpg)'); 
    }); 

Answer 1

Statt mehrere Ereignishandler hinzufügen, verwenden Sie einfach. Innerhalb des Handlers ändern Sie Bilder aus dem Array mit Hilfe einer Zählervariable.

Answer 2

Sie brauchen nicht drei Ereignishandler dafür (sie werden nur nacheinander ausgelöst und Sie sehen nur das letzte Bild). Wenn Sie Bilder ändern möchten, versuchen Sie Folgendes:

$(document).ready(function() { 
    // document has loaded 

    $('.right').click(function() { 
     // 1st image: 
     $('.zur-gda-img').css('background','url(images/sail-boat.jpg)'); 

     // 2nd image, appears in a second: 
     setTimeout(function() { 
      $('.zur-gda-img').css('background','url(images/sad_ostateczny.jpg)'); 

      // 3rd image, appears in another second: 
      setTimeout(function() { 
       $('.zur-gda-img').css('background','url(images/twierdza_wisloujscie.jpg)'); 
      }, 
      1000); 
     }, 
     1000); 
    }); 
});