Понимание области видимости и jquery в javascript

Question

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

Я бы хотел, чтобы top понял, как правильно это кодировать.

Спасибо ...

Answer 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();
  });