2016-11-07 61 views
1

我正在使用底部有4或5个视频的着陆页上,每个视频缩略图上都有一个播放按钮图标。每个视频都通过JavaScript加载,每个视频都是h5文本。当您单击任何视频的播放按钮时,它会将视频移动到主视频部分(视频点1) - 并将视频点1中的视频和文本移动到刚刚单击的视频点。我有视频切换,但我很难抓住h5的文本。下面是我目前有在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> 
+2

有一个在H5没有文字,你想要的ID? – Derek

+0

@Derek当页面加载时,h5中的文本通过js加载。我将每个标题保存为我的js中的变量。因此,当用户能够点击播放按钮时,h5 –

回答

1

在播放按钮放单击处理:

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

中会有文字完美显示,谢谢! –