Como posso reduzir os despedimentos no meu código jQuery?

Question

O tamanho do meu arquivo JavaScript está ficando fora de mão porque eu tenho centenas de links, e cada um tem a sua própria função jQuery embora todos eles peform basicamente a mesma tarefa.

Aqui está um pequeno trecho:

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

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

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

Haveria uma maneira de algum resumo desta lógica para que eu tenha apenas uma única função em vez de centenas que fazem a mesma coisa?

Answer 1

Você pode adicionar uma classe para todos os links que fazem a mesma coisa e agir com jQuery nessa classe.

<a href='whatever' id='link_1' class='toggler'>text</a>
<a href='whatever' id='link_2' class='toggler'>text</a>

código jQuery será:

$(".toggler").click( function(){
    // toggle the divs
    var number = $(this).attr("id").split('_')[1];
    $(".myDiv").hide();
    $("#myDiv"+ number).toggle();
});

Answer 2

A abordagem geral que eu uso é usar os métodos de travessia para encontrar elementos relacionados em vez de usar seletores absolutos. Isto irá permitir-lhe aplicar o mesmo código para elementos que são configurados de forma semelhante sem dependências complicadas sobre o formato dos ids, etc. feito corretamente também é razoavelmente robusto contra pequenas alterações ao mark up.

Por exemplo, digamos que eu tenho uma série de links, cada um seguido por um div que irá ser alternado clicando no link. Os links, cada um tem uma determinada classe para que eles possam ser facilmente referenciado.

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

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

Eu, então, encontrar todas as ligações por classe, em seguida, usar o método next para encontrar a div associado e alternar a sua visibilidade. Note que este é um exemplo simples. Você pode precisar usar mecanismos de passagem mais complicada e filtro por tipo de elemento ou classe, também, dependendo da sua marca exata up.

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

Answer 3

O que sobre a adição do ID de seu alvo para o href do link?

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

Em seguida, você pode escrever uma única função assim:

$(".toggle").click(function(e) {
    e.preventDefault();
    $(".myDiv").hide();
    $($(this).attr('href')).toggle();
});

---

Ou uma outra abordagem que eu usei:

$(".toggle").each(function(i) {
    $(this).click(function(e) {
        e.preventDefault();
        $(".myDiv").hide();
        $(".myDiv:eq("+i+")").toggle();
    });
});

Este é na mesma linha que a idéia de tvanfosson, usando algum tipo de relação DOM para ligar os elementos, neste caso, assumindo que os elementos de ligação e os elementos div são na mesma ordem na página.

Answer 4

Você pode apenas ter cada chamada clique uma função externa e passar um parâmetro para a cadeia número.

Ex:

$("#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);

Você pode adaptar isso para atender às suas normas de nomeação.

Dependendo da estrutura de suas divs e links, há melhores maneiras de fazer isso. Se você postar a estrutura de seus elementos, eu vou lhe mostrar um.

Answer 6

Eu acho que esta é uma refatoração simples

Você pode definir uma função como tal

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

e depois é só reutilizá-lo onde você precisa

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

Answer 7

Com base na solução de Craig:

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

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

Answer 8

eu mudar o link tornar-se assim (i renomear o id para apenas um número)

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

e, em seguida, em js:

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

Answer 9

jogar seu makeToggle em um loop?

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

for(i=1;i>=#;i++) {makeToggler(i);}

então você pode até mesmo tê-lo contar suas ligações para você, ligação alguma coisa esta:?

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

crédito: construindo sobre solução calças