DRY programming with jquery

Question

Posting as a jquery newbie. I am sure there must be a way to condense the code below in a DRY fashion. Essentially this is just a show/hide that is applied to multiple elements on a page, all using the same template and naming conventions:

$("#homelink1").hover(
    function() { $("#poptext1").show(); },
    function() { $("#poptext1").hide(); }
);

$("#homelink2").hover(
    function() { $("#poptext2").show(); },
    function() { $("#poptext2").hide(); }
);
...

I'm stuck on how to convert this to a function with passed parameters, so that I could just pass the integer (1 or 2) and have the function evaluate the rest, e.g.

$("#homelink" + param).hover

Show us the related HTML items

Incognito
– Incognito

2010-07-07 21:07:06 +00:00
Commented Jul 7, 2010 at 21:07 — Incognito
– Incognito, Commented Jul 7, 2010 at 21:07

Justin Ethier · Accepted Answer · 2010-07-07 20:53:38Z

5

How about this:

function setHover( param ){
   $("#homelink" + param).hover(
    function() { $("#poptext" + param).show(); },
    function() { $("#poptext" + param).hide(); }
  );
}

answered Jul 7, 2010 at 20:53

Justin Ethier

135k53 gold badges235 silver badges290 bronze badges

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

2 Comments

Dan Heberden Over a year ago

or param as an array? eh? eh?

Justin Ethier Over a year ago

Or you could just use a for loop :)

Jason Leveille · Accepted Answer · 2010-07-07 21:03:39Z

2

I'd probably try something like the following:

$('.homelink').bind('hover', function(){
    $('.poptext', this).toggleClass('hide');
});

# and some CSS

.hide {
    display: none
}

Bind the hover event to a generic classname, rather than trying to figure out how to hackishly bind it to #homelink{somenumber} and #poptext{somenumber}. Keep your ids in place if you must (for styling hooks for example), but simplify things and use classes.

answered Jul 7, 2010 at 21:03

Jason Leveille

1,1905 silver badges10 bronze badges

3 Comments

Faisal Over a year ago

I agree -- it seems like a case of "coincidental coupling", where two things are expected to have a relationship just because they share a naming convention. Classes are definitely the way to go here.

Anurag Over a year ago

+1 I don't know the HTML structure, but am assuming that .poptext class is somehow structurally related to .homelink. If so, this makes adding new stuff extremely easy - just change the HTML, JavaScript remains intact.

zinndesign Over a year ago

Yeah, this is definitely a more flexible solution. I ended up going with Faisal's solution because it required the least refactoring of my existing code, but I like this approach.

Faisal · Accepted Answer · 2010-07-07 21:04:11Z

2

Are the #poptext elements children of their respective #homelink? If so, you could create a "homelink" class and a "poptext" class and then do something like the following:

$(".homelink .poptext").hover(
    function() { $(this).show(); },
    function() { $(this).hide(); }
});

As a side note, most functions in jQuery work just as well on collections of objects as they do on a single one. In this case, even though $(".homelink .poptext") is returning a collection of objects, each one is individually associated with a mouseover and mouseout handler by hover().

edited Jul 7, 2010 at 21:04

answered Jul 7, 2010 at 20:56

Faisal

4,6981 gold badge21 silver badges13 bronze badges

2 Comments

zinndesign Over a year ago

I actually already had some similar classes in the code, so this ended up working great. The .poptext elements were siblings of .homelabel elements, so the code that worked for me is: $("div.homelabel").hover( function() { $(this).siblings(".poptext").show(); }, function() { $(this).siblings(".poptext").hide(); } );

Faisal Over a year ago

Great! Also, kind of a "duh" moment for me here, but I forgot that you wanted the hover() event associated with the homelink and not the poptexts, in which case my code doesn't work. Good on you for figuring it out in the end anyway. :)

user113716 · Accepted Answer · 2010-07-07 21:24:06Z

You could use a regexp to get the number from the homelink that was hovered, then toggle the associated poptext.

Try it out: http://jsfiddle.net/xFR3s/

$("#homelink1,#homelink2").hover( function() { 
    $("#poptext" + this.id.match(/\d+$/)[0]).toggle(); 
});

You could make it shorter with a "starts with" selector for the homelink elements. Less efficient, but it only runs once on DOM load, so perhaps it's alright.

Try it out: http://jsfiddle.net/xFR3s/1/

$("[id^=homelink]").hover( function() { 
    $("#poptext" + this.id.match(/\d+$/)[0]).toggle(); 
});

EDIT: If you don't want it interpreted on the fly, I guess I'd do something like this:

Try it out: http://jsfiddle.net/xFR3s/2/

$("[id^=homelink]").each(function() {
    var num = this.id.match(/\d+$/)[0];
    $(this).hover( function() { 
        $("#poptext" + num).toggle(); 
    });
});

or this:

Try it out: http://jsfiddle.net/xFR3s/3/

$("[id^=homelink]").each( function() {
    $(this).hover( setUpHover(this.id.match(/\d+$/)[0]) );
});

function setUpHover(num) {
    return function() {
        $("#poptext" + num).toggle(); 
    };
}

BenMorel · Accepted Answer · 2014-01-07 10:30:39Z

0

why don't you create an element with a class so you can do like this :

jQuery('.homelink').each(function() {
    var me = jQuery(this);
    var target = me.find('.poptext'); //if the target is 'poptext' class
    me.hover(
        function() {
           target.show();
        },
        function() {
            target.hide();
        }
    );
});

edited Jan 7, 2014 at 10:30

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered May 11, 2012 at 8:23

jey batosay

463 bronze badges

Collectives™ on Stack Overflow

DRY programming with jquery

5 Answers 5

2 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related