Question

我整天都在搜索这样的结果，并尝试了大量的可能性，但到目前为止没有任何成功。

对于一个新网站，我想创建一个包含3个视频的视频播放列表，但是，当我单击“播放/暂停”切换时，所有切换都从播放变为暂停，而不仅仅是一个。

我想防止在我的代码中使用ID toggle1，toggle2，toggle3等。我想创建一个带有按钮的类，可以在每个视频上放上按钮。当我单击第一个视频的播放按钮时，这些按钮仅需要切换第一个视频。第二和第三个视频保持暂停状态。

任何帮助将不胜感激！

$('.play-toggle').click(function () {
    if ($(this).hasClass('playvideo')) {
        $(this).removeClass('playvideo');
        $('.play').css({
            "visibility": "hidden",
        });
        $('.pause').css({
            "visibility": "visible",
        });
    } else {
        $(this).addClass('playvideo');
        $('.play').css({
            "visibility": "visible",
        });
        $('.pause').css({
            "visibility": "hidden",
        });
    }
});

<video id="my-video-1" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

<video id="my-video-2" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

<video id="my-video-3" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

Answer 1

要防止单击一个按钮时所有按钮发生切换，请按以下方式调整代码。另请注意，您的HTML无效-您对一个元素使用2个类属性。代替<a class="play-toggle" class="video-play">，只需写<a class="play-toggle video-play">

 $('.play-toggle').click(function () {
    if ($(this).hasClass('playvideo')) {
       $(this).removeClass('playvideo');
       $(this).find('.play').css({
        "visibility": "hidden",
       });
       $(this).find('.pause').css({
        "visibility": "visible",
    });
    } else {
       $(this).addClass('playvideo');
       $(this).find('.play').css({
        "visibility": "visible",
       });
       $(this).find('.pause').css({
        "visibility": "hidden",
       });
    }
});

播放/暂停切换多个视频

1 个答案: