JavaScript: ID-Zuweisung schlägt fehl

[forutuna]

Grüßt euch,

ich habe auf meiner Website einen Audioplayer mit drei Songs drinn. Jedes Audio hat eine eigene ID. Wenn man dort jetzt auf dem jeweiligen SOng auf Play klickt, klappt das auch. Nur das Play-Symbol wird bei jedem Song dann geändert und nicht nur bei dem jeweiligen. Wo liegt da noch der fehler?

Pleas show at: Lichtwerk2

function playPause(id) { 
   if(activeSong !== undefined && activeSong.id !== id) { 
   stopSong(); 
   } 
   activeSong = document.getElementById(id); 
   if (activeSong.paused){ 
   activeSong.play($("button").removeClass("play").addClass("pause")); 
   }else{ 
   activeSong.pause($("button").removeClass("pause").addClass("play")); 
   } 
   }

Ganzer JavaScript Code vom Player falls nötig: http://www.lichtwerk2.de/javascript/audio-player.js

<button name="play" type="button" value="play" class="play transition" onclick="playPause('<?=$row['titel']?>');"></button>

 

[dbarthel]

Alle Buttons heißen gleich, das ist das Problem. Du müsstest den Buttons jeweils die Id vom Titel zuweisen und dann danach filtern.

 

[Sempervivum]

Poste doch auch mal die URL der betr. Seite, damit man es sich im Zusammenhang ansehen kann und den Code sieht, der beim Browser ankommt.
Offenbar wird die Anzeige des Play-Symbols durch die beiden Klassen "pause" und "play" gesteuert. Dann braucht es nicht zu verwundern, dass sich alle Play-Symbole ändern, weil sich die jQuery-Anweisung auf alle Buttons bezieht.

 

[forutuna]

Poste doch auch mal die URL der betr. Seite, damit man es sich im Zusammenhang ansehen kann und den Code sieht, der beim Browser ankommt.
Offenbar wird die Anzeige des Play-Symbols durch die beiden Klassen "pause" und "play" gesteuert. Dann braucht es nicht zu verwundern, dass sich alle Play-Symbole ändern, weil sich die jQuery-Anweisung auf alle Buttons bezieht.

Hier die Seite dazu: Lichtwerk2

Eigentlich wird die komplette Funtion ja schon von der SongID abhängig gemach, und deshalb dachte ich nach dieser Code hinzufügung das es dann so klappen müsste. Mit

$(this)

klappt es leider auch nicht.

 

[Sempervivum]

Probier's mal so:

function playPause(id) {
	if(activeSong !== undefined && activeSong.id !== id) {
        $(activeSong).siblings("button").removeClass("pause").addClass("play");
	stopSong();
	}
	activeSong = document.getElementById(id);
	activeButton = $(activeSong).siblings("button");
	if (activeSong.paused){
	activeSong.play();
	activeButton.removeClass("play").addClass("pause");	
		
	}else{
	activeSong.pause();
	activeButton.removeClass("pause").addClass("play");	
	}
	}

 

[kkapsner]

Warum den Button suchen, wenn man ihn im Event eigentlich schon hat...

<button name="play" type="button" value="play" class="play transition" onclick="playPause(this, '<?php echo htmlentities($row['titel'], ENT_QUOTES);?>');"></button>

var playPause = (function(){
	var activeSong = null;
	var activeButton = null;
	return function playPause(button, id){
		if(activeSong && activeSong.id !== id){
			activeButton.removeClass("pause").addClass("play");
			stopSong();
		}
		activeSong = document.getElementById(id);
		activeButton = $(button);
		if (activeSong.paused){
			activeSong.play();
			activeButton.removeClass("play").addClass("pause");
		}
		else {
			activeSong.pause();
			activeButton.removeClass("pause").addClass("play");	
		}
	}
}());

PS: Globale Variablen sind schlecht.

 

[forutuna]

Probier's mal so

Wunderbar!! Ich habe gestern abend selbst noch einiges mit der "this"-Funktion probiert. Aber alles ohne erfolg. Deine Variante - 100%ig. Vielen Dank für die zusätzlichen Code-Zeilen.

 

[Sempervivum]

Ich habe gestern abend selbst noch einiges mit der "this"-Funktion probiert.

Wie der Beitrag von kkapsner zeigt, war das gar nicht mal verkehrt. Du siehst, beim Programmieren gibt es sehr häufig mehrere Wege, die zum Ziel führen.