仅更改onclicked内容并重置其余内容

Question

Sound Track List Image URL:

https://www.dropbox.com/s/2gtd4hrhfhxl4sm/song2.png?dl=0

I have list of sound track. If i click on the first song Play button will appear as well as click second one the play button should be moved to second song and first should be as usual. But output is not an expected result. Can anyone please guide me.??

My script is here

function loadSong(song_url, play_img, sequence_id){
    var x = document.createElement("IMG");
    x.setAttribute("src", "images/play.jpg");
    document.getElementById(sequence_id).appendChild(x);
}

Answer 1

Since you didn't post the HTML structure, I'll assume it's something like:

<div id="container">
    <div class="song">
        <div class="songImgDiv"></div>
        <div class="songTitle">Song 1</div>
    </div>
    <!-- other songs -->
</div>

And the img has class .activePlay.

$('.song').on('click', function () {
    var imgSrc = "images/play.jpg";
    $('.song img.activePlay').remove();
    var img = $('<img/>').prop('src', imgSrc).addClass('activePlay');
    $(this).find('.songImgDiv').append(img);
});

jsfiddle DEMO