修改多个元素的 <video> 行为答案

【问题标题】：Modify <video> behaviour for multiple elements修改多个元素的 <video> 行为
【发布时间】：2018-03-06 10:55:01
【问题描述】：

blow jQuery 被用来为一个元素创建简单的控件。但是，如果我在一个页面上有多个标签，脚本会影响所有标签，而不仅仅是点击的那个。

如何修改以下内容以仅影响该特定实例？

谢谢

    // Play/Pause button functionality
    // On click
    $('.video .icon').click(function() {
        if ($('.video video').hasClass('is-playing')) {
            // Add class to style controls
            $('.video video').removeClass().addClass('is-paused');
            // Pause video
            $('.video video')[0].pause();
        } else {
            // Add class to style controls
            $('.video video').removeClass().addClass('is-playing');
            // Play video
            $('.video video')[0].play();
        }
        return false;
    });
    // On touchstart
    $('.video .icon').on('touchstart', function() {
        $('.video video')[0].play();
        return false;
    });

【问题讨论】：

向我们展示您的 HTML 结构
只需将$('.video video') 替换为$(this).parents('.video').find('video')
感谢@slash197 - 完美，效果很好！有没有办法在开始播放时暂停所有其他视频元素，以避免同时播放多个视频？如果您想将此评论转换为答案，我很乐意接受它是正确的。

标签： jquery video html5-video

【解决方案1】：

为了仅定位当前正在交互的元素，我们可以简单地将$('.video video') 替换为$(this).parent().find('video')。实际上，这会查找 .icon 的父元素，然后在此搜索任何 <video> 元素。

// Play/Pause button functionality
// On click
$('.video .icon').click(function() {
    if ($(this).parent().find('video').hasClass('is-playing')) {
        // Add class to style controls
        $(this).parent().find('video').removeClass().addClass('is-paused');
        // Pause video
        $(this).parent().find('video')[0].pause();
    } else {
        // Add class to style controls
        $(this).parent().find('video').removeClass().addClass('is-playing');
        // Play video
        $(this).parent().find('video')[0].play();
    }
    return false;
});
// On touchstart
$('.video .icon').on('touchstart', function() {
    $(this).parent().find('video')[0].play();
    return false;
});

【讨论】：