javascript - 使用CSS类作为jQuery变量

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

最佳答案

变更：

var scroll = $('.verticalScrollBar');

至：

var scroll = '.verticalScrollBar';

结果您的损坏示例按预期方式运行。

.....

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

正如@ Katana314指出的那样，var scroll位定义的是jQuery对象，该对象目前尚不存在。 $(".verticalScrollBar");在执行changeScrollBar()之后才存在。

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

关于javascript - 使用CSS类作为jQuery变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38618780/