javascript - 使用 CSS 类作为 jQuery 变量

Question

据我了解，在 jQuery 中，您可以设置一个变量，然后在以后使用它。

var x = 2;
function add() {
    x = x + 2;
}

在我的代码中，我有一个 CSS 类作为变量。

var scroll = $('.verticalScrollBar');
function changeScrollBar() {
    ...
    TweenMax.set(scroll, {css:{height:scrollBarHeight+'%'}});
    ...
}

但是，这似乎行不通。最初，我认为这可能是 GSAP TweenMax 的问题，所以我尝试了以下代码。

function changeScrollBar() {
    ...
    TweenMax.set($('.verticalScrollBar'), {css:{height:scrollBarHeight+'%'}});
    ...
}

令我惊讶的是，这确实奏效了。所以我的问题是为什么代码行 TweenMax.set($('.verticalScrollBar'), {css:{height:scrollBarHeight+'%'}}); 工作但是这行代码 TweenMax.set(scroll, {css:{height:scrollBarHeight+'%'}}); 不是吗？

工作示例 JSFiddle

错误的例子 JSFiddle

Answer 1

改变:

var scroll = $('.verticalScrollBar');

收件人:

var scroll = '.verticalScrollBar';

导致您的错误示例按预期运行。

.....

编辑(现在两次)以解释为什么会发生这种情况。

正如@Katana314 所指出的，var scroll 位正在定义一个此时不存在的 jQuery 对象。 $(".verticalScrollBar"); 在 changeScrollBar() 执行后才存在。

使用 var scroll = '.verticalScrollBar' 是可行的，因为您没有声明不存在的 jQuery 对象。您只需提供一些文本，一旦对象创建后就可以将其与对象匹配。