Colin Roemer Colin Roemer - 1 month ago 13
HTML Question

Get text from element when play button is clicked

I am working on a landing page that has 4 or 5 videos at the bottom with a play button icon over each video thumbnail. each video is being loaded through javascript as is the h5 text for each. When you click the play button for any video, it moves the video to the main video section (video spot 1) - and moves the video and and text current in video-spot-1 into the spot of the video that was just clicked. I have the videos switching but I am having difficulty grabbing the text of the h5. Below is what I currently have in the HTML

<div class="row video-section-main-row"">
<div class="col-xs-12 main-vid-col">
<div id="player" class="hidden"></div>
<a href="#/" class="play-icon-main" id="play-button-1"><img src="images/play-icon-largest.png"></a>
<img class="main-video vid-spot" id="video-spot-1" src="">
<h5 class="main-video-headline" id="video-headline"></h5>
</div>
</div>
<div class="row video-section-thumbnail-row">
<div class="col-xs-3 video-col">
<img id="video-spot-2" src="">
<a href="#/" class="play-icon" id="play-button-2"><img src="images/play-icon-largest.png"></a>
<h5 id="video-thumbnail-headline-1"></h5>
</div>
<div class="col-xs-3 video-col">
<img id="video-spot-3" src="">
<a href="#/" class="play-icon" id="play-button-3"><img src="images/play-icon-largest.png"></a>
<h5 id="video-thumbnail-headline-2"></h5>
</div>
<div class="col-xs-3 video-col">
<img id="video-spot-4" src="">
<a href="#/" class="play-icon" id="play-button-4"><img src="images/play-icon-largest.png"></a>
<h5 id="video-thumbnail-headline-3"></h5>
</div>
<div class="col-xs-3 video-col">
<img id="video-spot-5" src="">
<a href="#/" class="play-icon" id="play-button-5"><img src="images/play-icon-largest.png"></a>
<h5 id="video-thumbnail-headline-4"></h5>
</div>
</div>

Answer

On the click handler for the play button put:

var videoText = $(this).siblings('h5').text();