Как уменьшить избыточность в коде jQuery?

размер моего файла JavaScript выходит из-под контроля, потому что у меня есть сотни ссылок, и каждая из них имеет свою собственную функцию jQuery, хотя все они в основном выполняют одну и ту же задачу.

вот короткий отрывок:

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

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

$("#link3").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv3").toggle();
});
9
abstraction javascript jquery redundancy

9 ответов

вы можете добавить класс ко всем ссылкам, которые делают то же самое и действуют с 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();
});
12

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

например, скажем, у меня есть ряд ссылок, за каждой из которых следует 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();
});
3

как насчет добавления идентификатора вашей цели в 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 для связи элементов, в этом случае, предполагая, что элементы link и элементы div находятся в том же порядке на странице.

3

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

Ex:

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

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

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

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

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

1

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

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

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

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

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

основываясь на решении Крейга:

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

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

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

<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(); 
    });
});
0

бросьте 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;
}

кредит: строительство на слаксах решение

0