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。每个链接都有一个特定的类，因此可以很容易地引用它们。

<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解决方案

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

9 个答案: