jQuery如何将选择器设置为变量

Question

这是我的问题：
我有 300px 宽度的侧边栏，用户可以隐藏它的一部分，然后侧边栏可能有 100px 宽度。我想在侧边栏隐藏时向元素添加类，当它已满时我想从该元素中删除类。 当我隐藏侧边栏脚本的一部分时效果很好，但是当我再次显示它时。变量 element 未定义。 谁能解释一下这是为什么？
这是我的功能

function checkSidebarWidth()
{
    var sidebarWidth = $('.sidebar').width();
    var element;

    if(sidebarWidth <= 100){
        element = $('.sidebarWidth .nav > li > a.active').parents('ul').prev().children();
        element.addClass('active');
    }else{
        if(!typeof(element) === 'undefined'){
            element.removeClass('active');
        }
    }   
setTimeout(checkSidebarWidth, 100);
}

Answer 1

局部变量不会在函数调用之后持续存在。当您对函数的第一次调用结束时，element 的值被扫除。

您可以做的是在函数范围之外声明element，并在函数中将其关闭。这样，它的值在调用之间保持不变。或者，您可以通过将element = $('.sidebarWidth .nav > l... 移到条件语句之外，每次都重新选择 jQuery 集合（效率会大大降低）。

另一种方法（也是我更喜欢的方法）是接受集合作为参数，当您递归调度函数时，将集合传递给它：

function checkSidebarWidth(element) {
    var sidebarWidth = $('.sidebar').width();

    if (sidebarWidth <= 100) {
        element.addClass('active');
    } else {
        element.removeClass('active'); //The conditional statement is no longer needed
    }   
    setTimeout(function(){checkSidebarWidth(element);}, 100);
}

现在您可以对集合进行一次评估，在第一次调用时传递它，而不必担心它：

var sideBar = $('.sidebarWidth .nav > li > a.active').parents('ul').prev().children();
checkSidebarWidth(sideBar);
//Done! sideBar will keep circulating around inside checkSidebarWidth

Answer 2

我想你可以在每次调用函数时分配element：

function checkSidebarWidth(element) {

//var element = $('.sidebarWidth .nav > li > a.active').parents('ul').prev().children();
if(sidebarWidth <= 100){
    element.addClass('active');
}else{
    element.removeClass('active');
}