Question

这是我的问题：
我有侧边栏，宽度为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);
}

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

jQuery如何将selector设置为变量

2 个答案: