javascript - 多个自定义 HTML5 视频控件中的索引图标

Question

我要控制多个 HTML5 视频，我需要更改用户点击的播放器上的播放和暂停图标。

现在对单个玩家执行此操作的方法就是

$('.glyphicon-pause').attr('class', 'glyphicon glyphicon-play');

但是当多个玩家的一部分(按照下面的索引列表)时，如果使用这种简单的方法，所有玩家都会受到影响，例如

        function onplayCallback(index) {
        // Event listener for the play/pause button
        playButton[index].addEventListener("click", function() {
            if (popUpPlayer[index].paused == true) {
                popUpPlayer[index].play();
                 $('.glyphicon-play').attr('class', 'glyphicon glyphicon-pause'); <-----here
            } else {
                // Pause the video
                popUpPlayer[index].pause();
                // Update the button text to 'Play'
                 $('.glyphicon-pause').attr('class', 'glyphicon glyphicon-play');
            }
        });

我尝试将上面的行替换为

 $(this).attr('class', 'glyphicon glyphicon-pause');

但问题是这只是添加了另一个暂停图标。

有解决办法吗？我已经尝试过 $(this).removeClass() 等，但这些方法都不起作用。

为了完整起见，这里是 html

<div id="video-controls">
            <a href="#" id="play-pause_<?php echo $i+1;?>"><span class="glyphicon glyphicon-play"></span></a> 
            <input type="range" id="seek-bar_1" value="0"> 
            <a href="#" id="btnMute_<?php echo $i+1;?>"><span   class="glyphicon glyphicon-volume-up"></span></a> 
            <input type="range" id="volume-bar_<?php echo $i+1;?>" min="0" max="1" step="0.1" value="1"> 
            <a href="#" id="btnFullscreen_<?php echo $i+1;?>"><span class="glyphicon glyphicon-fullscreen"></span></a>
    </div>

谢谢

Answer 1

我会想象 $(this)没有工作，因为它指向 <a> (currentTarget)，但你想要内部 <span> ？您是否记录了 this 的值？ ？

这取决于您的布局，但如果跨度是您的整个按钮，那么 e.target应该指向它。

playButton[index].addEventListener("click", function(e) {
   console.log(e.target); // check this is what you want
   var $span = $(e.target);

   if (popUpPlayer[index].paused == true) {
     $span.removeClass('glyphicon-pause').addClass('glyphicon-play');
   } else {
     $span.removeClass('glyphicon-play').addClass('glyphicon-pause');
   }
});