Question

在下面的示例中，当.article的类别为.has-video-thumb时，我希望.video-bg <video>能够播放。

下面的代码显示了工作版和非工作版。在嵌套的mouseenter函数中，如果我明确指定.article，它会按预期工作，但是如果我尝试在嵌套的(this)函数中重用mouseenter，它就不会＃39;工作并响应控制台错误＆＃39; Uncaught TypeError：无法读取属性＆＃39;播放＆＃39;未定义＆＃39;。

为什么(this)在这种情况下不起作用？

不工作

if ($('.article').hasClass('has-video-thumb')) {
    $(this).on({
        mouseenter: function () {
            $(this).find(".video-bg")[0].play(); // Console error shown
        }
    });
}

工作

if ($('.article').hasClass('has-video-thumb')) {
    $(this).on({
        mouseenter: function () {
            $('.article').find(".video-bg")[0].play(); // Working!
        }
    });
}

Answer 1

感谢@JJJ帮助解决这个问题。

在开头行上使用if语句时，this的值不会以任何方式设置。我们实际上不需要添加if语句，只需将第一个this更改为元素类名称，在本例中为.article.has-video-thumb。

$('.article.has-video-thumb').on({
    mouseenter: function () {
        $(this).find(".video-bg")[0].play();
    }
});

在jQuery中嵌套（this）

1 个答案: