用js切換元素

Question

我做了一個函數，所以當你點擊一個鏈接「播放」時，帶有黑色背景的div變成iframe視頻。它似乎工作正常。問題是，我想添加多個播放鏈接與多個視頻。我不知道該怎麼做，所以當你點擊第二個播放鏈接時，視頻會從同一個地方的第一個視頻變爲第二個。

我的代碼：

<script> 
    var toggle = function() { 
    var mydiv = document.getElementById('videoholder');document.getElementById("frame").src="http://www.youtube.com/embed/YuOBzWF0Aws"; 
    if (mydiv.style.display === 'block' || mydiv.style.display === '') 
    mydiv.style.display = 'none'; 
    else 
    mydiv.style.display = 'block' 
    } 
</script> 


    <a href="javascript:void(0)" onclick="toggle();">PLAY</a><br> 
    <div style="width:560px; height:315px; background-color:#111111;"> 
    <div id="videoholder" style="display:none;"> 
     <iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> 
    </div></div> 

Answer 1

你可以嘗試這樣的事情。

<script> 
    function toggle(url) { 
     var mydiv = document.getElementById('videoholder'); 
     document.getElementById("frame").src = url; 
     if (mydiv.style.display === 'block' || mydiv.style.display === '') { 
      mydiv.style.display = 'none'; 
     } else { 
      mydiv.style.display = 'block' 
     } 
    } 
</script> 


<a href="javascript:void(0)" onclick="toggle('http://www.youtube.com/embed/YuOBzWF0Aws');">PLAY 1</a><br> 
<a href="javascript:void(0)" onclick="toggle('http://www.youtube.com/embed/dQw4w9WgXcQ');">PLAY 2</a><br> 
<div style="width:560px; height:315px; background-color:#111111;"> 
<div id="videoholder" style="display:none;"> 
    <iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> 
</div></div> 

Answer 2

你可以使用document.getElementById('frame').src='http://linktonewvideo.com';

希望這有助於！