jQuery的代码太冗长了，想指点一下如何缩短它

我有一些jQuery代码，我想要如何使其行数减less和缩短的评论和指针。

$('#p1').click(function() { $('#list').fadeOut(450); $('#q1').delay(600).fadeIn(450) }); $('#p2').click(function() { $('#list').fadeOut(450); $('#q2').delay(600).fadeIn(450) }); $('#p3').click(function() { $('#list').fadeOut(450); $('#q3').delay(600).fadeIn(450) }); $('#p4').click(function() { $('#list').fadeOut(450); $('#q4').delay(600).fadeIn(450) }); ... $('#p12').click(function() { $('#list').fadeOut(450); $('#q12').delay(600).fadeIn(450) }); $('#p13').click(function() { $('#list').fadeOut(450); $('#q13').delay(600).fadeIn(450) }); 

这个代码可以更好地优化吗？ 或者至less减less冗长？

Answer 1

您可以使用for循环，但是您应该确保循环计数器的值进入click事件处理程序的正确范围：

 var clickHandler = function(k) { return function() { $('#list').fadeOut(450); $('#q' + k).delay(600).fadeIn(450); }; }; for (var i = 1; i < 14; ++i) { $('#p' + i).click(clickHandler(i)); } 

否则， delay和fadeIn将被独占地应用于#q13元素，因为实际计数器（其最终值为13）将被closures。

---

编辑 ：由于相当多的答案在这里得到了错误，我将试图更准确地解释这个代码中发生了什么，因为它似乎很混乱。

将click处理程序直接注入到循环中的“自然”解决scheme如下所示：

 for(var i = 1; i < 14; i++) { $('#p'+i).click(function() { $('#list').fadeOut(450); $('#q'+i).delay(600).fadeIn(450) }); } 

但这完全不等同于一个接一个地列出所有13个变体的扩展forms。 问题是，虽然这里确实创build了13个函数，但它们都在同一个variablesiclosures，其值发生了变化。 最后到达13的值，循环结束。

一段时间后，调用附加到#p1 … #p13元素的函数（当单击其中一个元素时），并使用i最终值。 这导致只有#q13被animation。

这里需要做的是做一个叫lambda的提升，并消除自由variablesi ，它的值会被无意中改变。 一个常见的技术是提供一个“工厂函数”，它接受我们的variables的值，并输出一个实际的函数作为事件处理函数：

 var clickHandler = function(k) { return function() { $('#list').fadeOut(450); $('#q' + k).delay(600).fadeIn(450); }; }; 

由于k参数的范围是clickHandler本地范围，每次调用clickHandler都会得到不同的kvariables。 从clickHandler返回的函数因此closures了不同的variables，而这些variables又可能具有不同的值。 这正是我们需要的。 然后我们可以从我们的循环中调用clickHandler ，传递它的计数器值：

 for (var i = 1; i < 14; ++i) { $('#p' + i).click(clickHandler(i)); } 

我希望这个差别更清楚。

---

编辑 ：正如Esailija在评论中指出的那样，也可以使用jQuery.each来实现类似的效果：

 $.each(new Array(13), function(idx) { $('#p' + (idx + 1)).click(function() { $('#list').fadeOut(450); $('#q' + idx).delay(600).fadeIn(450); }); }); 

如果您已经意识到我已经在上面概述的closures/范围问题，那么这可能是您select的解决scheme。

Answer 2

与接受的答案相反，IMO的理想解决scheme不是将您的代码基于id值之间的关系，而是基于DOM中的关系。 jQuery为您提供了一个index方法，它允许您查看元素与其兄弟的关系。 然后可以使用这个值来select适当的其他元素来显示。

这当然要求你以语义的方式构build你的HTML。 例如：

 <div id="list"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <a href="#">Link 8</a> </div> <div id="questions"> <!-- perhaps this is what q stands for... --> <div>1 ...</div> <div>2 ...</div> <div>3 ...</div> <div>4 ...</div> <div>5 ...</div> <div>6 ...</div> <div>7 ...</div> <div>8 ...</div> </div> 

第一个链接适用于第一个嵌套的div ，第二个到第二个等等。标记简单易懂，语义清晰。

你的代码可以非常简单，不需要担心工厂。 事实上，最好的方法是使用事件冒泡和委托，由jQuery的方法（在1.7;在这之前，使用delegate ）处理令人钦佩。

 $('#list').on('click', 'a', function() { $('#list').fadeOut(450); $('#questions div').eq($(this).index()).delay(600).fadeIn(450); }); 

工作jsFiddle （我知道animation看起来有点笨重，对不起。）

$(this).index()查找当前元素与其兄弟关系的关系。 .eq()过滤select（ #questions div元素）以find相应位置的元素。

代码可能不是那么快（如果你使用id值，它几乎肯定会稍微快一些），但是你的标记更简单，因此更健壮。

Answer 3

如果你必须坚持不使用事件代表团和class级，那么：

 $.each( new Array(13), function(index){ $('#p'+(index+1) ).click(function() { $('#list').fadeOut(450); $('#q'+(index+1)).delay(600).fadeIn(450) }); }); 

使用类和委托：

 $( document ).delegate( ".my-class", "click", function(){ var idIndex = this.id.match( /\d+$/, )[0]; $('#list').fadeOut(450); $('#q'+idIndex).delay(600).fadeIn(450) }); 

Answer 4

像其他人一样，你可以使用for-loop来做到这一点，但是你实际上已经把自己限制在14 p s，并且每当你添加一个新的p你需要增加你的for-looptesting条件。

这是我会做的：

 $("[id^=p]").bind("click", function() { $('#list').fadeOut(450); $('#q' + $(this).attr("id").match(/^#p(\d+)$/i)[1]).delay(600).fadeIn(450) }) 

Answer 5

难道你不能只用一个类而不是所有这些不同的id？ 然后一些导航find匹配的其他元素？

 $('.myCoolEffect').click(function(event) { $('#list').fadeOut(450); // find the matching element based on this on somehow $(event.currentTarget).up(1).delay(600).fadeIn(450); }); 

Answer 6

尝试这个，

 $('[id^="p"]').live('click', function(e){ var temp = this.id.match(/^p(\d+)$/); if(temp){ $('#list').fadeOut(450); $('#q' + temp[1]).delay(600).fadeIn(450); } }); 

我已经使用jqueryStartsWithselect器和生活function 。

更新：

As， Xion评论说，如果你使用这个代码，它将会影响其id's从p开始的所有其他元素。

如果你可以添加更多的字符在手段，这不会是一个问题。

更新2：

正如BrunoLM在评论中提到的那样，我已经稍微改变了代码，不要触发dom上的其他元素的事件，这些元素是以p开头的。

var temp = this.id.match(/^p(\d+)$/); 如果block处理其他id为p元素，

match(/^p(\d+)$/)返回null为id的像pblabla, p2sdad, pdasds2323和它返回一个数组的id像p1, p2, ... p100000....

Answer 7

 $('div').filter(function () { return this.id.match(/^p([0-9]+)$/); }).click(function () { $('#list').fadeOut(450); $('#' +$(this).attr('id').replace('p','q')).delay(600).fadeIn(450) });