Jquery 修改<；视频>；多元素的行为

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;
    });

---

为了只针对当前正在交互的元素，我们可以简单地将

$（'.video video'）

替换为

$（this.parent（）.find（'video'）

。实际上，这将查找

.icon

的父元素，然后在此搜索中查找任何

元素

// 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;
});

---

向我们展示您的HTML结构只需将

$（'.video video'）

替换为

$（此）。家长（'.video'）。查找（'video'）

谢谢@slash197-完美，效果很好！有没有办法在开始播放时暂停所有其他视频元素，以避免同时播放多个视频？如果你想把这个评论变成一个答案，我很乐意接受它的正确性。