Adding jQuery hover effect within a for loop doesn't work

Question

As the title says, i try to add a jquery hover effect to different a-tags within a for loop. The hover-effects are added but the hide-show-functionality inside seems to be wrong. i always get the selector for the last li-element.

Any help would be great.

http://jsfiddle.net/pGgeW/1/

here's the code:

html:

<a id="o1" href="#">Show Text 1</a>
<a id="o2" href="#">Show Text 2</a>
<a id="o3" href="#">Show Text 3</a>
<a id="o4" href="#">Show Text 4</a>
<a id="o5" href="#">Show Text 5</a>

<ul class="subTxt">
    <li id="u1">Text 1</li>
    <li id="u2">Text 2</li>
    <li id="u3">Text 3</li>
    <li id="u4">Text 4</li>
    <li id="u5">Text 5</li>
</ul>

javascript:

/* Hide li's */
$("ul.subTxt").find("li").each(

function() {
    $(this).hide();
});

/* Add Hover-Events */
for (var a = 1; a < 6; a++) {
    var k = '#o' + a;
    var e = '#u' + a;
    $(k).hover(

    function() {
        $(e).show();
        $(this).append('<div id="hk" style="position: relative;float: right;">' + k + ' ' + e + '</div>');
    }, function() {
        $(e).hide();
        $(this).find('#hk').remove();
    });
}

Welcome to Stack Overflow. If you've found my answer below helpful and it solves your problem, please click the checkbox to the left of it, marking it as the answer so that others may find it easily. Thank you! — Adam Terlson
– Adam Terlson, Commented Jun 27, 2011 at 13:41

PetersenDidIt · Accepted Answer · 2011-06-27 13:29:26Z

1

You can simplify it to this:

/* Hide li's */
$("ul.subTxt li").hide();

$("a.hover").hover(function(){
    var n = this.id.replace("o","");
    $("#u"+n).show();
}, function() {
    var n = this.id.replace("o","");
    $("#u"+n).hide();
});

http://jsfiddle.net/petersendidit/pGgeW/3/

answered Jun 27, 2011 at 13:29

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

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

Comments

Adam Terlson · Accepted Answer · 2011-06-27 13:37:05Z

1

Please review this fiddle: http://jsfiddle.net/pGgeW/9/

$("ul.subTxt").find("li").hide();

$("a").hover(function(e) {
    $($(this).attr('href')).toggle();
}).click(function() { return false; });

HTML:

<a href="#u1">Show Text 1</a>
<a href="#u2">Show Text 2</a>
<a href="#u3">Show Text 3</a>
<a href="#u4">Show Text 4</a>
<a href="#u5">Show Text 5</a>

<ul class="subTxt">
    <li id="u1">Text 1</li>
    <li id="u2">Text 2</li>
    <li id="u3">Text 3</li>
    <li id="u4">Text 4</li>
    <li id="u5">Text 5</li>
</ul>

Couple notes:

jQuery has looping built in. If you apply an operation like .hide(), it applies it to the entire collection. If you write a for loop to iterate over a jQuery collection, you're doing it wrong.
Generally you'll want to use a technique which associates your anchor tag with the target it's acting upon. Commonly this is done with the href attribute when the href isn't an external page and instead an internal reference (which uses the # sign). You'll see that I used it as a reference to the associated LI ID.

edited Jun 27, 2011 at 13:37

answered Jun 27, 2011 at 13:31

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

1 Comment

ThreeCheeseHigh Over a year ago

This is also a very nice solution. Thx Adam

James Montagne · Accepted Answer · 2011-06-27 13:39:15Z

0

The problem is that the e and k variables are global. One option would be to wrap that code in a function. This way e and k are local to that function. Like so:

http://jsfiddle.net/pGgeW/8/

answered Jun 27, 2011 at 13:39

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

ThreeCheeseHigh Over a year ago

Thank you for this suggestion, i'll keep this in mind for future.

Collectives™ on Stack Overflow

Adding jQuery hover effect within a for loop doesn't work

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related