使用 CSS 类作为 jQuery 变量答案

【问题标题】：Using CSS classes as jQuery variables使用 CSS 类作为 jQuery 变量
【发布时间】：2016-07-27 16:41:27
【问题描述】：

据我了解，在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

【问题讨论】：

我无法让您的任何一个 JSFiddle 示例滚动。
@showdev 我道歉。我还没有包括滚动功能。我目前正在研究外观
@showdev 如果你愿意，我可以在完成后将你链接到完成的版本？
哦，没问题。只是检查。
在您的非工作示例中，您在 DOM 中存在该元素之前选择 .verticalScrollBar。在您的工作示例中，您在 DOM 中存在该元素后选择该元素。 TweenMax documentation 声明 TweenMax 接受目标对象、对象数组或 选择器文本；因此您也可以将选择器指定为字符串（“.verticalScrollBar”），而不是传递 jQuery 对象。

标签： javascript jquery html css gsap

【解决方案1】：

变化：

var scroll = $('.verticalScrollBar');

收件人：

var scroll = '.verticalScrollBar';

导致您损坏的示例按预期运行。

.....

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

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

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

【讨论】：

谢谢。你知道为什么会这样吗？
我不得不冒险猜测，因为该问题似乎与您的外部资源 (TweenMax) 有关，但我会立即用该猜测更新上述内容。
JQuery 在您调用$(...) 时搜索文档中的匹配元素。所以，如果你过早调用它，元素可能还没有被解析到 DOM 中。
查看@Dan 的代码和@Katana314 的评论让我认为@Katana314 是100% 正确的。 verticalScrollBar 在设置为变量时不存在。