I have a list of songs. each one with an icon to play, I want that when you click on a song the icon changes (pause icon) and that when you click on another song the previous one changes its icon. but also when you click on a song and click on the same song, the icon also changes, that is, there is only a pause icon in the song that is playing.
<li class="lireproductor">
<img id="idplay1" class="play" data-audio="1" data-img="1" src="images/play.png">Cuando amanece
</li>
<li class="lireproductor">
<img id="idplay2" class="play" data-audio="2" data-img="2" src="images/play.png">animal
</li>
<li class="lireproductor">
<img id="idplay3" class="play" data-audio="3" data-img="3" src="images/play.png">animal
</li>
document.addEventListener('play', function(d)
{
//poner en play.png tdoas las canciones menos la que dispare la funcion
// var iconos = document.getElementsByTagName('idplay');
icono = $('#idplay' + $(this).data('img'));
icono.attr('src','images/pause.png');
for(var i = 0, len = icono.length; i < len;i++)
{
if(icono[i] != d.target)
{
icono[i].attr('src','images/play.png');
}
}
}, true);
www.jamondemono.com/mono in the discography section on the album the devirtualization of ideas I have the player.
What I want works for me, but if I click on a song, the icon changes to pause and then I click on another song, the icon of the previous one returns to play, but if you click twice on the same song, the icon does not change. (This is the problem)
I got the icon change with this code:
function iconopause1()
{
$("#idplay1").attr('src','images/pause.png');
$("#idplay2").attr('src','images/play.png');
$("#idplay3").attr('src','images/play.png');
$("#idplay4").attr('src','images/play.png');
$("#idplay5").attr('src','images/play.png');
$("#idplay6").attr('src','images/play.png');
$("#idplay7").attr('src','images/play.png');
}
but it is repeating a lot of code and it does not solve the problem well for me.
A quick method by changing a bit the code you already have. You say that this works fine for you but the problem is that a lot of code is repeated:
I got the icon change with this code:
One possible solution would be to make that function more generic. All the icons have the class
playand then the ids are consecutive. So you could create a generic function to which you pass the id you want and it makes all classy iconsplayhave the play icon again and only the one with the passed id has the pause icon. Something like that:Which you could simplify a little more by considering that they have an attribute
data-audiothat matches the id, and further by putting the code in a click event handler instead of as a standalone function. Here you can see a working example (I didn't have play/pause icons handy, so I used red/green instead):Now there is the problem that the icon changes when it is pressed twice. A possible solution would be to check the source of the image and if it has the word "pause" change it. But I would recommend a slightly more elegant solution which would be to add a class to the active icon and check if it has that class or not (because you may change the image in the future, like with my red and green icons and then it will stop working) .
The idea would be to do something like this (extending the code above):
And here is an executable example:
You can achieve the same thing using CSS classes, for example: