user1610904 user1610904 - 7 months ago 14
Javascript Question

jQuery - addClass to Nearest Above Div for Audio Player

I have an html5 audio player I'm working with (http://73rhodes.github.io/bbplayer/)

I'm trying to add a class to a div above the player once the player is playing. There are multiple players on the page with the same setup, so somehow I only want it applied to the first div above with the class "musicianspan".

My attempt to do this is on the last line in the script using "closest". But it doesn't work. Somehow I need the "glow" class applied to the above "musicianspan" div. Any ideas? Thank you!

<!-- Player 1 -->
<div class="musicianspan"></div>

<span class="bbplayer">
<span class="bb-play bb-paused"></span>
<span class="bb-trackLength">03:25</span>
</span>


<!-- Player 2 -->
<div class="musicianspan"></div>

<span class="bbplayer">
<span class="bb-play bb-paused"></span>
<span class="bb-trackLength">03:25</span>
</span>


<!-- Player 3 -->
<div class="musicianspan"></div>

<span class="bbplayer">
<span class="bb-play bb-paused"></span>
<span class="bb-trackLength">03:25</span>
</span>


<script>
BBPlayer.prototype.updateDisplay = function () {
var audioElem = this.bbaudio;
var duration = toTimeString(Math.ceil(audioElem.duration));
this.bbplayer.getElementsByClassName('bb-trackLength').item(0).innerHTML = duration;
if (this.bbaudio.paused) {
playButton.classList.remove("bb-playing");
playButton.classList.add("bb-paused");
} else {
playButton.classList.remove("bb-paused");
playButton.classList.add("bb-playing");
this.bbplayer.closest('.musicianspan').addClass('glow');
}
};
</script>

Answer

you must wrap your this.bbplayer elemet in jQuery function in order to be able to use its methods. so the following should work:

$(this.bbplayer).closest('.musicianspan').addClass('glow');
Comments