$(this)在if ($(".element").is()中不起作用

$(this) not working within if ($(".element").is()

本文关键字：quot 不起作用 is element this if      更新时间：2023-09-26

我对下面代码的预期结果是.csr-area-3 .csr-video添加了类csr-animate csr-zoom-in，为什么$(this)不能在这种情况下工作?

if ($(".csr-area-3 .csr-video").is(":in-viewport")) {
    $(this).addClass('csr-animate csr-zoom-in');
}

因为上下文是调用者函数/事件或全局窗口上下文，所以再次使用相同的选择器来添加类:

if ($(".csr-area-3 .csr-video").is(":in-viewport")) {
    $(".csr-area-3 .csr-video").addClass('csr-animate csr-zoom-in');
}

编辑注释

使用一个变量来存储jquery查找的结果:

var csrvideo = $(".csr-area-3 .csr-video");
if (csrvideo.is(":in-viewport")) {
    csrvideo.addClass('csr-animate csr-zoom-in');
}

注意:使用filter作为@saptal的答案将确保在存在多个元素的情况下将类添加到viewport内的元素。

您需要.filter(function)，以获得匹配的元素，这是在视图端口，然后添加类到它

$(".csr-area-3 .csr-video").filter(function() {
    return $(this).is(":in-viewport");
}).addClass('csr-animate csr-zoom-in');

也可以用

$(".csr-area-3 .csr-video:in-viewport").addClass('csr-animate csr-zoom-in');

如果只使用

$(this).someFunction();

this为window对象。

你需要做

$(".csr-area-3:in-viewport").addClass('csr-animate csr-zoom-in');
$(".csr-video:in-viewport").addClass('csr-animate csr-zoom-in');

(取决于你实际想要什么)

相关文章：