使用jquery进行DRY编程

Question

张贴为jquery新手。 我确信必须有一种方法可以以干燥的方式压缩下面的代码。 本质上，这只是一个应用于页面上多个元素的show / hide，所有元素都使用相同的模板和命名约定：

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

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

我坚持如何将其转换为具有传递参数的函数，以便我可以传递整数（1或2）并让函数评估其余的，例如

$("#homelink" + param).hover

Answer 1

这个怎么样：

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

Answer 2

#poptext元素是各自#homelink的子元素吗？ 如果是这样，您可以创建一个“homelink”类和一个“poptext”类，然后执行以下操作：

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

作为旁注，jQuery中的大多数函数在对象集合上的工作方式与在单个对象上的工作方式一样。 在这种情况下，即使$（“。homelink .poptext”）返回一个对象集合，每个对象都通过hover（）单独与mouseover和mouseout处理程序相关联。

Answer 3

我可能会尝试以下内容：

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

# and some CSS

.hide {
    display: none
}

将悬停事件绑定到通用类名，而不是试图弄清楚如何将其绑定到#homelink {somenumber}和#poptext {somenumber}。 如果必须（例如，用于样式挂钩），请保持您的ID，但要简化并使用类。

Answer 4

您可以使用正则表达式从homelink获取数字，然后切换关联的poptext 。

试一试： http ： //jsfiddle.net/xFR3s/

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

您可以使用homelink元素的“starts with”选择器缩短它。 效率较低，但它只在DOM加载时运行一次，所以也许它没问题。

尝试一下： http ： //jsfiddle.net/xFR3s/1/

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

---

编辑：如果你不想在运行中解释它，我想我会做这样的事情：

试一试： http ： //jsfiddle.net/xFR3s/2/

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

或这个：

尝试一下： 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(); 
    };
}​

Answer 5

为什么不用类创建一个元素，所以你可以这样做：

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