Javascrript onclick更改图像标题

czpddz 发表于 Dev

czpddz

我需要在播放器下显示当前加载的视频的标题。用户单击缩略图可将视频加载到jwplayer上。我只能加载第一个标题。

<div>Now playing: <span id='nowPlaying'>My 40th Aniversary</span> </div>


<script type="text/javascript">
function changeTitle(){
	  var video = document.getElementById('vidTitle').getAttribute('title');
	  document.getElementById('nowPlaying').innerHTML = video;
}
</script>

<!-- body of my pge -->

<h2>Trips</h2>
<ul>
  <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoElgin.mp4');"> <img   src="http://www.example.com/images/triptoelgin.jpg"  id='vidTitle' onclick='changeTitle()' title="Trip to Elgin "/></a>Trip to Elgin</li>

<li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoWaco.mp4');"> <img  src="http://www.example.com/images/triptowaco.jpg"  id='vidTitle' onclick='changeTitle()' title="Trip to Waco"/></a>Trip to Waco</li>
</ul>

<!-- begin snippet: js hide: false -->

如何添加变量以加载下一个视频节目？我试过了，但是它给出了不确定的值。

蔡斯·桑德曼（Chase Sandmann）

在HTML中，id属性必须是唯一的。现在，当您致电时document.getElementById('vidTitle')，无论如何浏览器都会选择第一个。如果要确定您单击了哪些图像，我将发送this给该changeTitle函数，如下所示：

的JavaScript

function changeTitle(element){
  var video = element.getAttribute('title');
  document.getElementById('nowPlaying').innerHTML = video;
}

的HTML

<ul>
  <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoElgin.mp4');"><img src="http://www.example.com/images/triptoelgin.jpg" id='vidTitle1' onclick='changeTitle(this)' title="Trip to Elgin "/></a>Trip to Elgin</li>
  <li> <a href="javascript:loadVideo('rtmp://OnDemand/triptoWaco.mp4');"> <img src="http://www.example.com/images/triptowaco.jpg"  id='vidTitle2' onclick='changeTitle(this)' title="Trip to Waco"/></a>Trip to Waco</li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。