修改 多个元素的行为

Posted 2021-05-07

打击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的父级，然后在此搜索中搜索任何<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;
});