如何减少 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();
});

Answer 2

我使用的一般方法是使用遍历方法来查找相关元素，而不是使用绝对选择器。 这将允许您将相同的代码应用于配置类似的元素，而无需对 id 的格式等产生任何复杂的依赖关系。正确完成后，它对于标记的微小更改也具有相当的鲁棒性。

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

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

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

然后，我将按类查找所有链接，然后使用 next 方法查找关联的 div 并切换其可见性。 请注意，这是一个简单的示例。 您可能还需要使用更复杂的遍历机制并按元素类型或类进行过滤，具体取决于您的具体标记。

$('.linkClass').click( function() {
    $(this).next().toggle();
});

Answer 3

将目标 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").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();
    });
});

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

Answer 4

您可以让每次单击调用外部函数并传入数字字符串的参数。

前任：

$("#link1").click(toggle("1"));
$("#link2").click(toggle("2"));

function toggle(number) {
    $(".myDiv").hide();
    $("#myDiv"+number).toggle();
}

Answer 5

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

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

您可以调整它以满足您的命名标准。

根据您的 div 和链接的结构，有更好的方法来做到这一点。 如果您发布元素的结构，我将向您展示一个。

Answer 6

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

您可以定义一个函数

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

，然后在需要的地方重用它

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

Answer 7

基于克雷格的解决方案：

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

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

Answer 8

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

<a href='#test1' id='1' class='link'> ... </a>
<a href='#test2' id='2' class='link'> ... </a>
<a href='#test3' id='3' class='link'> ... </a>

，然后在 js 上：

$(document).ready(function(){
    $('.link').click(function(){
      $('.myDiv').hide();
      var id = $(this).attr('id'); // take the id
      $('#myDiv'+id).toggle(); 
    });
});

Answer 9

将 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;
}

信用：基于 SLaCKS 解决方案构建