使用 CSS 类作为 jQuery 变量

Question

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

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

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

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 对象。您只需提供一些文本，一旦对象创建后就可以将其与对象匹配。

使用 CSS 类作为 jQuery 变量

Using CSS classes as jQuery variables

html

javascript

css

jquery

gsap

使用 CSS 类 作为 jQuery 变量

Using CSS classes as jQuery variables

html

javascript

css

jquery

gsap

使用 CSS 类作为 jQuery 变量