2016-08-08 84 views
1

Ich habe dieses Skript für mein Forum gemacht und ich fragte mich, ob jemand mir helfen könnte, wie der Browser eine Audiodatei zu spielen, wenn der Benutzer über die Klasse style113 schwebt, aber es muss geben ihnen eine Warnmeldung, die "audio is about to play" sagt, wenn sie ok auf die Warnung drücken, sollte es spielen, wenn sie auf Abbrechen drücken, sollte es nicht. Wie kann ich das erreichen? Hier ist das Skript Ich habe bisher:Abspielen einer Audiodatei auf Hover

my script has been removed 
+0

Hat meine Antwort Ihnen geholfen? Wenn ja, achte darauf (indem du auf das grüne Häkchen neben der Antwort klickst), um der Community zu zeigen, dass es dir geholfen hat. Wenn nicht, fordern Sie bitte weitere Hilfe an. –

Antwort

0

können Sie den folgenden Code verwenden:

var elems = document.getElementsByClassName("style113"); 
for(i in elems) { 
    elems[i].addEventListener("mouseover", function() { 
     if(confirm(" %%% CONFIRMATION MESSAGE %%% ")) { 
      // %%% CODE TO PLAY SOUND %%% 
     } 
    }); 
} 

Was es tut:

  1. Loops über Elemente der Klasse style113
  2. Adds ein Ereignis-Listener für jedes Element zu Ereignis mouseover
  3. In jedem Ereignis-Listener, schafft eine confirm() Popup (hat zwei Tasten, eine zu bestätigen und eine abzubrechen)
  4. Wenn die confirm() Methode gibt true (wenn die positive Schaltfläche geklickt wird), dann spielt Sound

Working example on JSFiddle


UPDATE Wie pro OP Anfrage in den Kommentaren unten, können Sie diesen Code auf Ihre speziellen Code in der for Schleife hinzu:

document.getElementsByClassName('style113')[x].addEventListener("mouseover", function() { 
    if(confirm("audio is about to play")) { 
     // %%% CODE TO PLAY SOUND %%% 
    } 
}); 

Ich würde Ihnen auch raten, Ihren Quellcode mit besseren Einzugspraktiken zu bereinigen. Vermeide es auch, zu viele DOM-Anfragen zu machen (z. B. wiederhole document.getElementsByClassName()) und schaue stattdessen nach caching DOM requests.

+0

wo stelle ich das hin? Welche Zeile – ThePlacid

+0

@ThePlacid Ich werde meine Antwort erweitern, um diese Informationen zu enthalten. Gib mir eine Sekunde. –

+0

@ThePlacid Herausgegeben. Sie können den Ereignis-Listener (den unteren Code) in beiden Schleifen platzieren, genau wie alle anderen Zeilen, die mit "document.getElementsByClassName()" beginnen. Siehe auch meinen Kommentar zu DOM-Anfragen. –