Undefined variable when hovering

Question

I have two lists, When I hover on Tom in one-list I want the description about him to go red so I have added a class of hover as shown below. The problem I am having is I can't remove the hover state as I am getting undefined when I am leaving the hover state. I have commented out the few things I have tried so far. Is there a way to either know the value of id or remove any class called hover on the page when I leave the hover?

    <ul id="one-list">
        <li id="u11">Tom</li>
        <li id="u22">Jerry</li>
    </ul>

    <ul id="another-list">
        <li id="a11">Tom is 22 years old</li>
        <li id="a22">Jerry is 18 years old</li>
    </ul>

    $("#one-list li").hover(

    function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        //$('body').removeClass("hover");
        //$('#another-list #a' + id ).removeClass("hover");
    }
    );

    .hover {
        color:red;
    }

p.s.w.g · Accepted Answer · 2013-12-19 23:34:03Z

3

You're getting that error because id is only defined within the first function. You'd need to get the id again in the second function, for example:

$("#one-list li").hover(
    function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).removeClass("hover");
    }
);

Or more simply

$("#one-list li").hover(
    function () {
        var id = this.id.replace('u', '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        var id = this.id.replace('u', '');
        $('#another-list #a' + id ).removeClass("hover");
    }
);

Or even better:

 $("#one-list li").hover(
    function () {
        var id = this.id.replace('u', '');
        $('#another-list #a' + id ).toggleClass("hover");
    }
 );

edited Dec 19, 2013 at 23:34

answered Dec 19, 2013 at 22:53

p.s.w.g

150k31 gold badges307 silver badges339 bronze badges

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

3 Comments

ak85 Over a year ago

thanks for the response, I tried what you said but I can't seem to remove the class still for some reason? In this fiddle jsfiddle.net/aaronk85/6Q9LX I have added in an alert which confirms id is there but it is not removing? Can you see what I have missed here?

p.s.w.g Over a year ago

@ak85 You had $('body').removeClass("hover") in your second function, but it looks like you meant to do id = id.replace(/u/, ''). See my updated answer.

ak85 Over a year ago

yeh that body bit was there as I thought maybe I could look in the body and remove and class called hover but I had commented it out as I knew it wouldn't work how it was. thanks

E. S. · Accepted Answer · 2013-12-19 23:17:25Z

0

try this.. put a 'temporary' variable with the another list element.. i don't understand why you remove 'u' from id.. but...

http://jsfiddle.net/ND3p8/3/

(function($){

    var $listItem = $("#onelist li");
    var $anotherListItem = null;

    $listItem.hover(function(){ //handlerIn

        var $item = $(this);
        var id    = $item.attr('id');


        id = id.replace(/u/,''); //replace letter 'u'...why?

        $anotherListItem = $("#a"+id);

        if( $anotherListItem ){
            $anotherListItem.addClass('hover');
        }

    },function(){ //handlerOut

        if( $anotherListItem ){
            $anotherListItem.removeClass('hover');
        }

        $anotherListItem = null;

    });


})(jQuery);

edited Dec 19, 2013 at 23:17

answered Dec 19, 2013 at 22:59

E. S.

2,91920 silver badges23 bronze badges

1 Comment

Barmar Over a year ago

You're not using $item in the second function.

Collectives™ on Stack Overflow

Undefined variable when hovering

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related