javascript - 使用 jquery 添加不适用于 html5 视频播放器的类

Question

我有一个简单的视频 block ，在视频结束时我显示某些 gif，

问题:

现在，当用户暂停视频时，GIF 也会显示，这意味着当视频结束时，GIF 现在会显示，当我再次播放视频并暂停视频时，GIF 会再次显示

待办事项

我希望当用户暂停视频时，gif 不应该显示，这意味着gif 应该只在视频结束时显示

这是我的解决方案

HTML

<div canplay id="video-block">
    <div id="video-container">
        <video id="videoplayer" playsinline muted autoplay>
            <source src="videos/good_job.mp4"></source>
        </video>
        <div id="interactive-layers">
        </div>

    </div>

    <div id="pause-play-button">
        <img id="play" src="images/play.png">
        <img id="pause" src="images/pause.png">
    </div>

JS

$(document).ready(function(){
        $("#videoplayer")[0].addEventListener("ended", onVideoEnded);
});


function showGif(gifname) {
        $("#gif-data").remove();
        var gif = $("<div id='gif-data'><audio class='audio' id='gifaudio'  autoplay src='" + gifs[gifname].audio + "'></audio><img class='gif' id='animatedgif' src='" + gifs[gifname].gif + "?rand=" + Math.random() + "'></div>")
        $("#interactive-layers").append(gif);
}


function onVideoEnded(e) {

        showGif("ed22");

}


$("#pause-play-button").on("click", function () {
        clearTheTimeout();
        if ($("#video-block video")[0].paused == true) {
                $("#gif-data").addClass("hidegif");
                $("#video-block video")[0].play();
                $("#pause").css("display", 'block');
                $("#play").css("display", "none");
        } else {
                $("#video-block video")[0].pause();
                $("#audioplayer")[0].pause();
                $("#gif-data").removeClass("hidegif");
                $("#pause").css("display", 'none');
                $("#play").css("display", "block");
        }
});

CSS

.hidegif{
    display: none;
}

不幸的是，当我点击暂停视频按钮时，我的 GIF 仍然出现，

我做错了什么？

Answer 1

我认为问题的发生是因为元素“gif-data”是动态创建的。尝试在父静态元素内查找元素。

    $('#video-block').find("#gif-data").addClass("hidegif");

这应该有效。