JQuery .hover() issue

Question

I'm making a site where I count the .jpgs in the img folder and save the number under albumLength, then use a for cycle to display them all on the site, and each of them has an id ="content"+i, so content1, content2,etc. When I hover over content1 I want the element with id= plus_label1 to stop being hidden and make it visible and when I leave the object to make it invisible again. The problem is that my current code isn't working, no errors, it just doesn't appear. Any ideas why?

for(i=1;i<=albumLength;i++){
$("#content"+i ).hover(
  function() {
    $("#plus_label"+i).css('visibility','visible');
  },
  function() {
$("#plus_label"+i ).css( 'visibility','hidden');
  }
);
}

can you add a consistent class name to the content, or do you not have access to it? — Adjit, Apr 01 '16 at 18:34
Better if you can post some html, even put a working example on fiddle — Ziv Weissman, Apr 01 '16 at 18:35
You'll have to do something like var idStr = "#plus_label" + i; in order for it to work. Otherwise, the i keeps changing before the event is executed. — phenxd, Apr 01 '16 at 18:38
I would prefer `.show()` and `.hide()` instead of visibility changes — Yerko Palma, Apr 01 '16 at 18:41

score 1 · Accepted Answer · edited Apr 01 '16 at 18:52

1

The problem is that when you do your hover, i is no longer defined. However given that the #plus_label ends with the same number as the #content you can do:

for(i=1;i<=albumLength;i++){
$("#content"+i ).hover(
  function() {
    var i = parseInt($(this).attr('id'));
    $("#plus_label"+i).css('visibility','visible');
  },
  function() {
     var i = parseInt($(this).attr('id'));
     $("#plus_label"+i ).css( 'visibility','hidden');
  }
);
}

edited Apr 01 '16 at 18:52

Yerko Palma

12,041
5
33
57

answered Apr 01 '16 at 18:46

Poul Bak

10,450
5
32
57

Technically, `i` does exist. It's just that they're referencing the exact same `i` value in their functions. Meaning, all of them are going to read `i` as `albumLength + 1`. – Mike Cluck Apr 01 '16 at 20:44

JQuery .hover() issue

1 Answers1