jQuery如何將選擇器設置為變量

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