jQuery干优化答案

【问题标题】：jQuery dry optimizationjQuery干优化
【发布时间】：2012-09-03 12:45:53
【问题描述】：

您好，我想问一下如何优化该代码：

        $('#infoTrigger0').live('click', function() {
            $('#info0').slideToggle();
        });
        $('#infoTrigger1').live('click', function() {
            $('#info1').slideToggle();
        });
        $('#infoTrigger2').live('click', function() {
            $('#info2').slideToggle();
        });
        $('#infoTrigger3').live('click', function() {
            $('#info3').slideToggle();
        });
        $('#infoTrigger4').live('click', function() {
            $('#info4').slideToggle();
        });
        $('#infoTrigger5').live('click', function() {
            $('#info5').slideToggle();
        });...

带有循环或其他我不知道的东西？

【问题讨论】：

你能发布这个正在运行的 HTML 吗？

标签： jquery optimization coding-style refactoring

【解决方案1】：

$(document).on('click', 'elem[id^=infoTrigger]', function() {
      var n = this.id.match(/\d+/g)
      $('#info'+n).slideToggle();
});

live 方法已弃用，您可以改用on。

【讨论】：

【解决方案2】：

for (var i = 0; i < n; i++) {
$('#infoTrigger' +i).live('click', function () {
    $('#info' +i).slideToggle();
});

}

【讨论】：

【解决方案3】：

怎么样？：

for(var i =0;i<6;i++){
  $('#infoTrigger' + i).live('click', function() {
      $('#info' + i).slideToggle();
  });
}

我建议使用on 而不是live，因为现在不推荐使用最后一个。

【讨论】：

【解决方案4】：

如果你像这样制作 html

<div class="info" id="info1">
  <div id="info1_sub"></div>
</div>

你可以应用这个

 $('.info').live('click', function() {
            var elem="#"+$(this).attr("id")+"_sub";
            $(elem).slideToggle();
        })

【讨论】：