I have a web page with a list of songs on it. When you click one of the songs, it should start playing automatically as it drops down/animates the music player into the screen.
I have a bunch of divs that are the same class. Each one of them has a unique child element that has it's own unique ID. I am trying to fetch it via a wildcard because each one has a different number, but there is only one in each div. I am aware that .find() searches everything inside the given node, so I'm not sure why my approach doesn't work.
The page consists of a bunch of songs, each with their own media player/container. There is also a dummy container that always plays the same song at the top of the list for debugging purposes. I can get the dummy container to play whenever I click a song (any song) but none of the others will work.
If I use this code it works fine:
$('body').find('[id^=mediaContainer]').jPlayer('play');
But if I use this, it never plays, no matter which one I click on:
$(this).find('[id^=mediaContainer]').jPlayer('play');
Both of these are inside of a .click() function.
$('.track').click(function(){
if ( $(this).find('.trackPlayer').is(':hidden') ) {
//removing color from prev. track
$(".selectedTrack").removeClass("selectedTrack");
$('.trackPlayer').slideUp();
$(this).addClass("selectedTrack");
$(this).find('.trackPlayer').slideDown();
$('body').find('[id^=mediaContainer]').jPlayer('play');
} else {
$(".selectedTrack").removeClass("selectedTrack");
$(this).find('.trackPlayer').slideUp();
}
}).find('.trackPlayer').click(function(e) {
e.stopPropagation();
});
The dummy container is labeled mediaContainer while the live containers are labeled mediaContainer1, mediaContainer2 and so on. Is this causing the problem? I don't see how it would because each instance of .track only has one instance of a mediaContainer inside it.
Could it be that the jQuery slideDown() animation hasn't finished so it can't start playing the audio or is it a syntax error? Not sure why it isn't working, any help is appreciated.
I've also tried referencing one of the live containers this way:
$('body').find('#mediaContainer1').jPlayer('play');
But that didn't work either. The only one it will work for is the dummy container, which doesn't start off hidden, which leads me to believe it could be an issue with .slideDown(). If it is an issue with this, it would be nice if someone could explain how to send that command once .slideDown() is finished.
jQuery's slideDown function (like many others) accepts a function to execute once the animation is complete. You would therefore likely want something like this for that spot of your code.
...
$(this).find('.trackPlayer').slideDown(function () {
$(this).find('[id^=mediaContainer]').jPlayer('play');
});
...