我怎样才能减少我的jQuery代码的冗余？

StackOverflow https://stackoverflow.com/questions/1100026

题

我的JavaScript文件的大小失控，因为我有几百个链接，每个人都有自己的jQuery的功能，即使他们都基本上[执行相同的任务。

下面是一个简短摘录：

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

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

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

会不会有一种方法来抽象一些这样的逻辑，这样我只有一个单一的功能，而不是数百做同样的事情？

有帮助吗？

解决方案

您可以添加一个类所有做同样的事情和行为与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();
});

其他提示

，我使用的一般方法是使用遍历方法来查找相关的元素，而不是使用绝对选择。这将允许你在相同的代码应用到正确的完成它也是对小的改动标记相当强劲的说，是没有任何复杂的依赖关系类似配置的ID的格式元素，等等。

举例来说，假设我有一系列的链接，每个随后，将通过点击该链接上进行切换一个div。每个链路具有一个特定的类，这样他们可以很容易地被引用。

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

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

然后，我会找到类中的所有链接，然后使用next方法来查找相关的股利和切换它的可视性。请注意，这是一个简单的例子。您可能需要按元素类型或类中使用更复杂的穿越机制和过滤器，也取决你的具体标记。

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

怎么样将你的目标的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元素是在页面上的相同的元素顺序链接，在这种情况下

可以只具有每个点击调用外部函数并传递在用于数字串的参数。

例如：

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

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

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

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

您可以适应这个以满足您的命名标准。

根据您的div和连接件的结构，有更好的方法来做到这一点。如果您发布元素的结构，我会告诉你的。

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

可以定义一个函数作为这样

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

，然后只是重复使用它在你需要它

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

在Craig的溶液大厦：

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

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

我改变成为这样的链路（重命名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(); 
    });
});

扔你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;
}

信用：建筑物上休闲裤溶液

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top