如何通过标签里面的class名发生变化来控制子节点

Question

代码如下

 <div class="cbp-item design">
                        <div class="u-block-hover g-parent">
                            <video id="my_video_3" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" poster="~/assets/img-temp/500x335/img1.jpg" data-setup="{}">
                                <source src="~/Content/Video/software.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="text-center g-pa-25 mb-1">
                            <h3 class="h5 g-color-black mb-1">123123</h3>
                            <p class="mb-0">123123</p>
                        </div>
                    </div>

cpb-item这个class会变化为cpb-item-off 我如何通过在变化之后让它下面对应的video标签的视频停止播放
里面有多个这样的标签，我想在每一个cpb-item-off下面的video都是停止播放的状态

Answer 1

更换样式的代码最后增加下面2局代码执行video暂停方法

    var videos = document.querySelectorAll('.cpb-item-off video');
    for (video of videos)video.pause()

如果无法修改事件，可以用MutationObserver来监控dom对象的属性修改，具体参考

原生js监听dom节点属性变化_默默地博客-CSDN博客_js监听dom属性变化 // 选择需要观察变动的节点const targetNode = document.getElementById('js-toc');// 观察器的配置（需要观察什么变动）const config = { attributes: true, childList: true, subtree: true };// 当观察到变动时执行的回调函数const callback = function(mutationsList, observer) {// Use traditional 'for lo https://blog.csdn.net/qq_38334525/article/details/108597580

有其他问题可以继续交流~