如何减少jQuery代码中的冗余？

Question

我的JavaScript文件的大小已经失控,因为我有数百个链接,每个链接都有自己的jQuery函数,即使它们都执行基本相同的任务.

这是一个简短的摘录:

$("#link1").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv1").toggle();
});

$("#link2").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv2").toggle();
});

$("#link3").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv3").toggle();
});

有没有办法抽象出一些逻辑,这样我只有一个函数而不是数百个函数做同样的事情？

Answer 1

您可以向执行相同操作的所有链接添加一个类,并在该类上使用jQuery.

<a href='whatever' id='link_1' class='toggler'>text</a>
<a href='whatever' id='link_2' class='toggler'>text</a>

jQuery代码将是:

$(".toggler").click( function(){
    // toggle the divs
    var number = $(this).attr("id").split('_')[1];
    $(".myDiv").hide();
    $("#myDiv"+ number).toggle();
});