jQuery как установить селектор в переменную

Question

вот моя проблема:
У меня есть боковая панель шириной 300 пикселей, пользователь может скрыть ее часть, а затем боковая панель может иметь ширину 100 пикселей. Я хотел бы добавить класс к элементу, когда боковая панель скрыта, а когда она заполнена, я хотел бы удалить класс из этого элемента. Когда я скрываю часть скрипта боковой панели, хорошо работает, но когда я показываю его снова. переменная элемент не определен. Кто-то может объяснить мне, почему?
Вот моя функция

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 за пределами функции и закрыть ее в функции. Таким образом, его ценность сохраняется между вызовами. Кроме того, вы можете повторно выбирать коллекцию 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 

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