使用jquery进行DRY编程

发布为jquery新手。我确信必须有一种方法来以干的方式来压缩下面的代码。本质上，这是应用到多个元素在页面上只显示/隐藏，都使用相同的模板和命名约定：使用jquery进行DRY编程

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

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

我卡在如何将其转换为一个函数传递的参数，以便我可以传递整数（1或2）并让函数评估其余部分，例如

$("#homelink" + param).hover

来源

2010-07-07 JayZeeNYC

向我们展示相关的HTML项目 – Incognito 2010-07-07 21:07:06

如何：

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

来源

2010-07-07 20:53:38

或param作为数组？是吗？是吗？ – 2010-07-07 20:59:28

或者你可以使用'for'循环:) – 2010-07-08 00:02:23

均为其各自#homelink的#poptext元素的孩子吗？如果是这样，你可以创建一个“链家”类和“poptext”类，然后像做了以下内容：对象的

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

作为一个方面说明，在jQuery的工作大部分功能也很好的收藏品为他们在一个单一的。在这种情况下，即使$（“。homelink .poptext”）正在返回一个对象集合，每个对象都通过hover（）单独与一个mouseover和mouseout处理程序关联。

来源

2010-07-07 20:56:36 Faisal

我其实已经在代码中有了一些类似的类，所以这个结果很好。 .poptext元素是.homelabel元素的兄弟，所以对我有用的代码是： $（“div.homelabel”）。hover（ function（）{$（this）.siblings（“.poptext”）（）。$（this）.siblings（“。poptext”）。hide（）;} ）;}（）;}， function; – JayZeeNYC 2010-07-07 21:37:52

太棒了！另外，对我来说，这里有一种“嘟嘟嘟嘟”的时刻，但我忘了你想要的是与homelink相关的hover（）事件，而不是poptext，在这种情况下，我的代码不起作用。无论如何，最后还是要好好研究一下。 :) – Faisal 2010-07-07 21:51:35

我可能会尝试一些类似如下：

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

# and some CSS 

.hide { 
    display: none 
}

绑定悬停事件到一个通用的类名，而不是试图找出如何hackishly将其绑定到#homelink {} somenumber和#poptext {} somenumber。如果你必须保持你的ID（例如用于造型钩），但是要简化事物并使用类。

来源

2010-07-07 21:03:39

我同意 - 这似乎是一个“巧合偶合”的情况，其中两件事物因为共享一个命名约定而预期会有关系。课程绝对是这里的方式。 – Faisal 2010-07-07 21:13:52

+1我不知道HTML结构，但假设'.poptext'类在某种程度上与'.homelink'结构相关。如果是这样，这使得添加新的东西非常简单 - 只需更改HTML，JavaScript保持不变。 – Anurag 2010-07-07 21:15:52

是的，这绝对是一个更灵活的解决方案。我最终选择了Faisal的解决方案，因为它最少需要重构我现有的代码，但我喜欢这种方法。 – JayZeeNYC 2010-07-07 21:42:43

您可以使用正则表达式从homelink中获取悬停的编号，然后切换关联的poptext。

试试看：http://jsfiddle.net/xFR3s/

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

你可以把它与一个 “打头” 选择为homelink元素短。效率较低，但它只在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(); 
    }; 
}

来源

2010-07-07 21:06:35 user113716

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

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

来源

2012-05-11 08:23:19

使用jquery进行DRY编程

回答

相关问题