Javascrript onclick更改图片标题

Question

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

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

 

 
<script type="text/javascript"> 
 
function changeTitle(){ 
 
\t var video = document.getElementById('vidTitle').getAttribute('title'); 
 
\t 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 -->

我如何添加一个变量来加载下一个视频标题？我试过这个，但是它给出了未定义的值。

Answer 1

在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> 

Answer 2

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

 

 
<script type="text/javascript"> 
 
function changeTitle(video){ 
 
\t var video = video.getAttribute('title'); 
 
\t 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" 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" onclick='changeTitle(this)' title="Trip to Waco"/></a>Trip to Waco</li> 
 
</ul> 
 

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

Answer 3

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