javascript - DRY programming with jquery - Stack Overflow

admin管理员组

文章数量:1426308

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

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

• javascript
• jquery
• dry

Share Improve this question Follow asked Jul 7, 2010 at 20:51 zinndesignzinndesign 18822 silver badges1111 bronze badges 1

• 1 Show us the related HTML items – Incognito Commented Jul 7, 2010 at 21:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

How about this:

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

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.

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().

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/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/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/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/xFR3s/3/

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

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

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();
        }
    );
});

本文标签： javascriptDRY programming with jqueryStack Overflow