Как я могу уменьшить избыточность в моем коде 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

Вы можете просто вызвать каждый вызов по вызову внешней функции и передать параметр для числовой строки.

Ex:

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

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

Answer 3

Я думаю, что это просто рефакторинга

вы могли бы определить функцию как таковой

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

, а затем просто использовать его там, где нужно

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

Answer 4

Опираясь на решение Крэйга:

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

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

Answer 5

изменить ссылку стать, как это (я переименовать идентификатор только номер)

<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:

Answer 6

Общий подход, который я использую, заключается в использовании методов обхода для поиска связанных элементов, а не с использованием абсолютных селекторов. Это позволит вам применять один и тот же код к элементам, которые аналогичным образом настроены без каких-либо сложных зависимостей от формата идентификаторов и т. Д. Правильно это сделано, он также достаточно устойчив к незначительным изменениям разметки.

Например, скажем, у меня есть ряд ссылок, за которыми следует 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 7

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

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

Вы можете приспособить это, чтобы удовлетворить ваши стандарты именования.

В зависимости от структуры ваших разделов и ссылок есть лучшие способы сделать это. Если вы разместите структуру своих элементов, я покажу вам ее.

Answer 8

Как насчет добавления идентификатора вашей цели в ссылку 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 находятся в t он же порядок на странице.

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

кредита: строительство на слабины решения