Bild bei Symbolzustand ändern ändern: Jquery

Question

Ich versuche, die "body" Hintergrundbilddatei auf meiner Webseite zu ändern, wenn der Benutzer zwischen Musiksymbolwiedergabe und Pause wechselt.

Hier ist, was die CSS für "body" Element wie folgt aussieht:

body { 
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/intro-bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

So in der Musik-Funktion, ich zwei Zustände haben, spielen und Pause. Ich habe versucht, das Bild in jedem der „if“ Bedingungen wie folgt zu ändern:

$("#music").click(function() { 
    if (playing) { 
    // Stop playing 
    document.body.style.background = "url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/intro-bg.jpg') no-repeat center center fixed"; 
    $("body").css({backgroundSize: "cover"}); 
    audioElement.pause(); 
    } else { 
    // Start playing 
    if (!initDone) { 
     initDone = true; 
     document.body.style.background = "url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/header-background.jpg') no-repeat center center fixed"; 
     audioElement = document.createElement('audio'); 
     audioElement.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/om_cut.mp3'); 

     audioElement.addEventListener('ended', function() { 
     this.currentTime = 0; 
     this.play(); 
     }, false); 
    } 

    audioElement.play(); 
    } 

    $(this).find('i').toggleClass('fa-music fa-stop'); 
    playing = !playing; 
}); 

Nun, was das passiert, wenn ich die Musik spielen, die Änderungen Bild und dann, wenn ich auf das Stoppsymbol klicken Sie erneut auf das Bild ändert zurück zu meinem normalen Bild. Aber dann, wenn ich das nächste Mal wieder auf Wiedergabe klicke, ändert sich das Bild nicht. Es bedeutet also, dass ich nur einmal ausgeführt wurde. Wie kann ich es jedes Mal machen, wenn ich zwischen Wiedergabe und Pause umschalte? durch

Answer 1

Das erste Mal, setzen Sie diesen initDone = true;

Also, auf den zweiten und aufeinanderfolgenden Aufrufen der if (!initDone) Zustand ändert das Bild verhindert.

Verschieben document.body.style.background =... über die Bedingung und es sollte tun, was Sie suchen.

Answer 2

in diesem Zustand if (!initDone) { .... } müssen Sie nur das Skript machen, die den Hintergrund daraus ändern. https://jsfiddle.net/m2s5kho2/

var playing = false, initDone = false; 
$("#music").click(function() { 
    if (playing) { 
    // Stop playing 
    document.body.style.background = "url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/intro-bg.jpg') no-repeat center center fixed"; 
    $("body").css({backgroundSize: "cover"}); 
    audioElement.pause(); 
    } else { 
    // Start playing 
     document.body.style.background = "url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/header-background.jpg') no-repeat center center fixed"; 
    if (!initDone) { 
     initDone = true; 
     audioElement = document.createElement('audio'); 
     audioElement.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/665940/om_cut.mp3'); 

     audioElement.addEventListener('ended', function() { 
     this.currentTime = 0; 
     this.play(); 
     }, false); 
    } 
    audioElement.play(); 
    } 

    $(this).find('i').toggleClass('fa-music fa-stop'); 
    playing = !playing; 
});