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

我的JavaScript文件的大小越来越大，因为我有数百个链接，每个链接都有自己的jQuery函数，尽管它们基本上都是同一个任务

以下是一个简短的摘录：

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

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

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

---

是否有一种方法可以抽象一些这种逻辑，这样我就只有一个函数，而不是数百个做同样事情的函数？

您可以让每次单击调用一个外部函数，并为数字字符串传递一个参数

例：

---

我认为这是一个简单的重构

您可以这样定义函数

function doSomethingTo(thisDiv)
{
   $(".myDiv").hide();
   $(thisDiv).toggle();
}

然后在需要的地方重复使用

$("#link1).click(doSomethingTo(thisDiv));
$("#link2).click(doSomethingTo(thisDiv));

---

您可以将一个类添加到所有执行相同操作的链接中，并在该类上使用jQuery进行操作

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

---

基于Craig的解决方案：

$("#link1, #link2").click(toggle(this));

function toggle(obj) {
    $(".myDiv").hide();
    $("#myDiv" + $(obj).attr("id").replace('link','')).toggle();
}

---

我将链接更改为这样（我将id重命名为一个数字）

---

我使用的一般方法是使用遍历方法来查找相关元素，而不是使用绝对选择器。这将允许您将相同的代码应用于配置类似的元素，而不会对ID的格式产生任何复杂的依赖关系，等等。正确完成后，它还可以合理地抵抗标记的微小更改

例如，假设我有一系列链接，每个链接后面都有一个div，可以通过单击该链接进行切换。每个链接都有一个特定的类，因此它们可以很容易地被引用

<a href="#" class="linkClass">Toggle</a>
<div>
     Some content...
</div>

<a href="#" class="linkClass">Toggle</a>
<div>
     Other content
</div>

您可以对此进行调整以满足命名标准

---

根据你的div和link的结构，有更好的方法。如果您发布了元素的结构，我将向您展示一个。

将目标的ID添加到链接的href中怎么样

<a id="link1" href="#myDiv1" class="toggle">Toggle 1</a><br/>
<a id="link2" href="#myDiv2" class="toggle">Toggle 2</a><br/>
<a id="link3" href="#myDiv3" class="toggle">Toggle 3</a><br/>

---

或者我用过的另一种方法：

$(".toggle").each(function(i) {
    $(this).click(function(e) {
        e.preventDefault();
        $(".myDiv").hide();
        $(".myDiv:eq("+i+")").toggle();
    });
});

---

这与tvanfosson的想法相同，使用某种DOM关系来链接元素，在本例中，假设链接元素和div元素在页面上的顺序相同。

是否将makeToggle放入循环中

function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

for(i=1;i>=#;i++) {makeToggler(i);}

然后你甚至可以让它为你计算你的链接，链接这个

function countElementsByClass(className){
  var count = 0;
  var o = document.getElementsByTagName("a").className;
  for(var i=0;i<o.length;i+){
      if(o[i].className == "accordion/whatever")
          count ++;
      }

  return count;
}

函数countElementsByClass（类名称）{
var计数=0；
var o=document.getElementsByTagName（“a”）.className；
对于（var i=0；iHoly FSM。我刚被JQuery打湿了脚，从午餐开始就一直在解决这个问题，来这里是为了让堆栈溢出暂停！我最喜欢这个方法，因为你可以将任何元素添加到任何其他元素中。例如，
$（“coolLink”）。单击（“1”）
，你的代码将调用
toggle（）
当应用
.click（）
方法时，而不是当用户实际单击链接时。他们有100个链接。因此，我将不适合逐个编写#link1..#link100:）（它还会添加更多代码）哎哟-我没有读过全部内容。典型的我。在这种情况下，上面Elzo的解决方案是最好的。我认为这是迄今为止最干净的方法，也更可取，因为makeToggler（）函数可以相当直接地进行单元测试。我想你的意思是“
$（“#link1”）。单击（doSomethingTo）
”。你是对的$（“#link1”）。单击（doSomethingTo）（“#myDiv1”）；它仍将立即调用
doSomethingTo（）
，而不是将其指定为单击处理程序。我相信您考虑的是
$（“#link1”）。单击（函数（）{doSomethingTo（this）；}）
.IMHO，这是最好的方法，因为当您在HTML中添加更多的“链接”和“div”时，代码会自动为您处理切换行为。顺便说一句，Elzo，您需要指定“number”变量的来源。类似于var id=$（this.attr（'id'）；var number=id.substr（id.indexOf（'uxof'））；我更喜欢使用遍历机制，而不是依赖于id格式/值。如果项目是相关的，它们通常也会在DOM中紧密对齐，并且可以使用next/prev/find/closest等轻松找到。这是一个非常好的建议tvanfossaon。但有时，根据您的页面在DOM中不可能将这些元素保持在一起布局。我也喜欢Soldarnal使用href属性来承载此信息的想法。很好奇为什么您选择id来隐藏关联数据？我不太经常看到我会多次向上投票的帖子。回答很好！如果您的页面布局允许使用此HTML，我更喜欢这种方法。：）我对您的示例的理解是，这是对页面上元素之间的关系做了很多假设。我正在制作一个高度风格化的页面，其中“下一个”元素与链接无关。（至少我这么认为）.@ipso-fact——正如我所说，这个例子相对简单。如果元素之间确实没有可识别的DOM关系，那么您需要找到其他一些机制。典型的情况是它们是相关的，您可以使用遍历找到相关元素的机制。find/nextall+each，等等，或者，
$（'a.acordian'）。长度
$('.linkClass').click( function() {
    $(this).next().toggle();
});

function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

makeToggler(1);
makeToggler(2);
makeToggler(3);

<a id="link1" href="#myDiv1" class="toggle">Toggle 1</a><br/>
<a id="link2" href="#myDiv2" class="toggle">Toggle 2</a><br/>
<a id="link3" href="#myDiv3" class="toggle">Toggle 3</a><br/>

$(".toggle").click(function(e) {
    e.preventDefault();
    $(".myDiv").hide();
    $($(this).attr('href')).toggle();
});

$(".toggle").each(function(i) {
    $(this).click(function(e) {
        e.preventDefault();
        $(".myDiv").hide();
        $(".myDiv:eq("+i+")").toggle();
    });
});

function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

for(i=1;i>=#;i++) {makeToggler(i);}

function countElementsByClass(className){
  var count = 0;
  var o = document.getElementsByTagName("a").className;
  for(var i=0;i<o.length;i+){
      if(o[i].className == "accordion/whatever")
          count ++;
      }

  return count;
}