Понимание области видимости и цепочки jquery в javascript
Я пытаюсь лучше понять объем и цепочку в javascript. У меня есть следующее, которое отлично работает
$("div.sked, div.report, div.database").hover (function (){
let $this = $(this);
let $pos = $this.position();
$submenu = $this.find (":first-child");
$submenu.css ('left', $pos.left + 30);
$submenu.css ('top', $top);
$submenu.show();
})
.mouseleave (function (){
$submenu.hide();
});
Но когда я добавляю let перед $submenu = $this.find (":first-child");
Тогда $submenu выходит за рамки, и подменю не скрываются.
Я хотел бы понять, как правильно это кодировать.
Спасибо...
Ответы 1
Это потому, что переменные let имеют область видимости блока, а не функции. Если вы объявляете переменную в первом обратном вызове, вы не можете использовать ее в другом обратном вызове, потому что блок был изменен.
Чтобы разделить переменную между двумя функциями, вам нужно будет объявить ее в месте, которое сделает ее доступной для обеих областей.
Но в вашем случае нет такого места, где обработчики событий могли бы выполняться независимо от их объявленного порядка. Итак, вам нужно будет снова получить элемент в обратном вызове mouseleave.
$("div.sked, div.report, div.database").hover(function() {
let $this = $(this);
let $pos = $this.position();
$submenu = $this.find(":first-child");
$submenu.css('left', $pos.left + 30);
$submenu.css('top', $top);
$submenu.show();
})
.mouseleave(function() {
let $this = $(this);
$submenu = $this.find(":first-child");
$submenu.hide();
});