Can not loop JQuery .hover()

Question

JQuery .hover() method will encounter problem when you want to run a loop on it. Say I have code as follow

<div class="screen screen_1"></div>
<div class="screen screen_2"></div>
<div class="screen screen_3"></div>

for(j=0; j<$('.screen').length+1; j++){
  $('.screen_'+ j +'').hover(
      function mousein(){
        //do something when mouse enters

      }, function mouseout(){
        //do something else when mouse leaves
      }
  );
}

now jhint is telling me not to do a function inside a loop so I have the following but it still doesn't like it.

var mousein = function(){
  //do something when mouse enters
};

var mouseout = function(){
  //do something else when mouse leaves
};

for(j=0; j<$('.screen').length+1; j++){
  $('.screen_'+ j +'').hover(
    mousein, mouseout;
  );
}

Thanks in advance

sorry guys...wasn't thinking straight. Thanks again for the help. — Dylan Hsiao
– Dylan Hsiao, Commented Jun 1, 2017 at 1:03

Sam Axe · Accepted Answer · 2017-06-01 00:38:28Z

2

no need for the loop...

 $('.screen').hover(
    function(){
        //do something when mouse enters
        // $(this) gets you the element being affected.
      }, function(){
        //do something else when mouse leaves
      }
  );

answered Jun 1, 2017 at 0:38

Sam Axe

33.9k10 gold badges60 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2017-06-01 00:38:00Z

1

Remove the ; inside function arguments

$('.screen_'+ j +'').hover( mousein, mouseout/*;*/);
                                             //^^ not valid

answered Jun 1, 2017 at 0:38

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

DevlshOne · Accepted Answer · 2017-06-01 00:42:17Z

0

Eliminates the need for external functions...

$('.screen').mouseenter(function() {
    //do something when mouse enters
}).mouseleave(function() {
    //do something else when mouse leaves
});

answered Jun 1, 2017 at 0:42

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Comments

Chris Thornton · Accepted Answer · 2017-06-01 01:21:01Z

0

It's not necessary to loop over it to assign a handler. just use:

$(".screen").on("mouseenter mouseleave",function(event){
    switch(event.type){
       case "mouseenter":
           // code for mouse in
           break;
       case "mouseleave":
           // code for mouse out
           break;
}

use $(this) to use the element that triggered the event. for example if .screen_1 triggered the event $(this) will be essentially equal to using $(".screen_1")

edited Jun 1, 2017 at 1:21

answered Jun 1, 2017 at 0:55

Chris Thornton

1622 silver badges12 bronze badges

3 Comments

DevlshOne Over a year ago

There is no need to differentiate between .hover() and .mouseenter() when there's also a .mouseleave() event in play.

Chris Thornton Over a year ago

That didn't occur to me while I was writing it :P Thanks, I'll edit it

charlietfl Over a year ago

hover() does all that switch internally... no need to define individual events in a switch ... just adds code bloat for no reason

Joe Higley · Accepted Answer · 2017-06-01 01:32:40Z

0

the problem with your loop is that you are essentially trying to loop for the first n frames. If you want something to loop when you hover over something then the loop needs to be inside of the function, not the function inside the loop. So your code should look a bit more like this:

$('.screen_'+ j +'').hover(
  function mousein(){
    //do loop

  }, function mouseout(){
    //do loop
  }
);

answered Jun 1, 2017 at 1:32

Joe Higley

1,8823 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

Can not loop JQuery .hover()

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related