Question

我已使用类替换了html中的以下 ID ，但我在尝试运行javascript时遇到问题。它应该为视频播放器创建一个播放/暂停按钮。

<div class="video_player_box">
    <video class="my_video" width="550" height="300"> 
        <source src="video.mp4"> 
    </video> 
    <div id="video_controls_bar"> 
        <button id="playpausebtn" onclick="playPause(this,'my_video')">
            Pause
        </button> 
    </div>
</div>

现在请帮助我对我的javascript进行必要的更改，以便它可以使用类而不是ID运行。

function playPause(btn,vid)
{ 
    var vid = document.getElementById(vid); 
    if(vid.paused)
    { 
        vid.play(); 
        btn.innerHTML = "Pause"; 
    } 
    else 
    { 
        vid.pause(); 
        btn.innerHTML = "Play"; 
    } 
}

Answer 1

使用getElementsByClassName()：

<script> 
    function playPause(btn,vid){ 
        var vids = document.getElementsByClassName(vid);
        for(index = 0; index < vids.length; ++index){
            if(vids[index].paused){ 
                vids[index].play(); 
                btn.innerHTML = "Pause"; 
            } else{ 
                vids[index].pause(); 
                btn.innerHTML = "Play"; 
            }
         } 
     } 
</script>

用类替换ID，现在Javascript将无法运行

1 个答案: