Understanding scope and jquery chaining in javascript

Question

I am trying to better understand scope and chaining in javascript. I have the following which works just fine

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

But when I add a let before $submenu = $this.find (":first-child"); Then $submenu goes out of scope and submenus are not hidden.

I would like top understand the proper way to code this.

Thank you...

31piy · Accepted Answer · 2018-05-02 14:09:43Z

That's because let variables are block scoped, and not are function scoped. If you declare the variable in the first callback, you cannot use it in the other callback because the block has been changed.

To share a variable among the two functions, you will need to declare it at a place which makes it available to both of the scopes.

But, in your case, there is no such place as event handlers can be executed irrespective of their declared order. So, you will need to fetch the element again in the mouseleave's callback.

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

Collectives™ on Stack Overflow

Understanding scope and jquery chaining in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related