Wie kann ich die Entlassungen in meinem jQuery-Code reduzieren?

Question

Die Größe meiner JavaScript-Datei wird aus der Hand, weil ich Hunderte von Links haben, und jeder hat seine eigene jQuery-Funktion, obwohl sie alle im Grunde die gleiche Aufgabe peform.

Hier ist ein kurzer Auszug:

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

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

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

Gäbe es eine Möglichkeit, zu abstrahieren einige dieser Logik, so dass ich nur eine einzige Funktion statt Hunderte haben, die das gleiche tun?

Answer 1

Sie können eine Klasse zu allen Links hinzufügen, die die gleiche Sache und handelt mit jQuery auf dieser Klasse zu tun.

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

jQuery-Code wird sein:

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

Answer 2

Der allgemeine Ansatz, die ich verwende, ist die Traversal Methoden zu verwenden, verwandte Elemente zu finden, anstatt absolute Selektoren. Dies ermöglicht es Ihnen, den gleichen Code auf Elemente anzuwenden, die in ähnlicher Weise ohne komplizierte Abhängigkeiten von dem Format der ids konfiguriert sind, usw. Fertig richtig es ist auch recht robust gegenüber geringfügigen Änderungen bis zur Marke.

Zum Beispiel, sagen, ich habe eine Reihe von Links, die jeweils von einem div gefolgt, die auf diesem Link, indem Sie umgeschaltet werden werden. Die Verbindungen haben jeweils eine bestimmte Klasse, so dass sie leicht Bezug genommen werden kann.

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

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

Ich würde dann alle Links von Klasse finden, dann die next Methode verwenden, die zugehörige div zu finden und schalten Sie es Sichtbarkeit. Beachten Sie, dass dies ein einfaches Beispiel. Sie müssen möglicherweise komplizierter Traversal Mechanismen und Filter durch Elementtyp oder Klasse verwenden, je nach Ihrer genauen Markierung auf.

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

Answer 3

Was die ID Ihres Ziels in die href der Verbindung über das Hinzufügen von?

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

Dann könnte man eine einzelne Funktion schreiben wie folgt:

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

---

oder ein anderer Ansatz, den ich verwendet habe:

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

Dies ist in der gleichen Richtung wie tvanfosson Idee, irgendeine Art von DOM Beziehung mit den Elemente zu verbinden, in diesem Fall unter der Annahme, dass die Verbindungselemente und die div-Elemente in der gleichen Reihenfolge auf der Seite sind.

Answer 4

Sie können nur jedem Klick eine externe Funktion aufrufen und in einem Parameter für die Nummer String übergeben.

Beispiel:

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

Sie können diese an Ihre Benennungsstandards gerecht zu werden.

Je nach Struktur Ihrer divs und Links, gibt es bessere Möglichkeiten, es zu tun. Wenn Sie die Struktur Ihrer Elemente schreiben, ich werde dir einen zeigen.

Answer 6

Ich denke, dies ist eine einfache Refactoring

Sie könnten eine Funktion als solche definieren

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

und dann nur um es wieder verwenden, wo Sie es brauchen

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

Answer 7

Aufbauend auf Craig Lösung:

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

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

Answer 8

ich den Link zu ändern, wie dies wurde (i benennen Sie die ID nur eine Zahl)

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

und dann auf js:

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

Answer 9

werfen Sie Ihre makeToggle in eine Schleife?

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

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

dann könnte man sogar haben sie Ihre Links für Sie zählen, etwas Link dazu:?

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

Kredit: Gebäude auf SLACKS Lösung