JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<span id="info"></span>
<br />
<br />
<div ><span class="play" data-song="song_name_1"></span></div>
<br />
<div ><span class="play" data-song="song_name_2"></span></div>
<br />
<div ><span class="play" data-song="song_name_3"></span></div>
<br />
<div ><span class="play" data-song="song_name_4"></span></div>

CSS

.pause{
    background: url("http://abload.de/img/pause_play_stop_blackbcjzw.png");
    background-size: 160px 45px;
    display:block;
    height: 45px;
    width: 45px;
}

.play{
    background: url("http://abload.de/img/pause_play_stop_blackbcjzw.png") 103px;
    background-size: 160px 45px;
    display:block;
    height: 45px;
    width: 45px;
}

JavaScript

function playPause(song){
    // lass hier den Song abspielen 
    $("#info").html("Spiele: "+song); // fyi
}

$("span").on("click",function(){
    var song = $(this).data("song"); // holt den Song Titel aus dem Button
    playPause(song); // deine playPause Funktion
    if($(this).hasClass("play")){
        $(".pause").removeClass("pause").addClass("play"); // alle Elemente mit pause-klasse -> entferne pause-Klasse / füge play-Klasse hinzu
        $(this).removeClass("play").addClass("pause"); // der angeklickte Button -> entferne play-Klasse / füge pause-Klasse hinzu
    }else{
        $(this).removeClass("pause").addClass("play"); // der angeklickte Button -> entferne pause-Klasse / füge play-Klasse hinzu
        $("#info").html(song+" angehalten"); // fyi
    }
});