0

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

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);
}
4

2 回答 2

4

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

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

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

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
于 2013-05-31T17:00:58.710 回答
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');
}
于 2013-05-31T17:02:56.737 回答