jQuery.each () Schwierigkeiten

Question

Ich werde versuchen, diese kurz zu halten. Ich versuche Boxen von Text zu erstellen, oder zeigen verstecken, wenn der Benutzer auf eine Schaltfläche klickt erweitern. Ich bin mit dem Toggle () -Methode.

Das Markup ist wie folgt:

<span id="toggle0">+</span>
<div id="toggle0Container">
    blablabla...
<div>

<span id="toggle1">+</span>
<div id="toggle1Container">
    blablabla...
<div>

<span id="toggle2">+</span>
<div id="toggle2Container">
    blablabla...
<div>

// etc

Die # toggle0 soll die # toggle0Container wechseln, die # toggle1 die # toggle1Container schaltet und so weiter. Dies alles wird von PHP erzeugt so eine beliebige Anzahl dieser Behälter sein kann.

Hier ist der JQuery-Code:

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function() {
        $('#toggle' + this + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function() {
        $('#toggle' + this).click(function() {
            // this line is not working
            $('#toggle' + this + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

Es funktioniert mit Ausnahme des Hin- und Herschalten Teil (ich habe Kommentar über der Zeile hinzugefügt, die Arbeit ist nicht). Wo ist das Problem?

Answer 1

würde ich mgroves Ansatz folgen, aber wenn Sie wirklich das Array tun wollen, oder wollen einfach nur, um herauszufinden, wie jeder () zu verwenden, richtig, hier ist, wie Sie es verwenden sollte:

$(document).ready(function() {
    // array of numbers, it's pretty redundant, there will never be more than 30 containers
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36];
    // hide all containers first
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item + 'Container').hide();
    });
    // now the toggle buttons
    jQuery.each(arr, function(index, item) {
        $('#toggle' + item).click(function() {
            // this line is not working
            $('#toggle' + item + 'Container').slideToggle('slow');
            // and this just changes the toggle button from + to -
            if ($(this).html() == '+') {
                $(this).html('-');
            } else {
                $(this).html('+');
            }
        });
    });
});

Answer 2

Es ist, weil „dies“ jetzt in einem anderen Bereich ist, und bezieht sich auf die tatsächlichen #toggleN DOM-Element, nicht eine der Zahlen im Array.

Ich würde vorschlagen, dass Sie die Anordnung von Zahlen Graben, und verwenden Sie einen anderen Wähler, so etwas wie:

$("div[id^=toggle][id$=container]").hide();

$("span[id^=toggle]").click(function() {
     $(this).find("span[id^=toggle][id$=container]").slideToggle("slow");
     // .. do your other html stuff
}

Just jene eachs Graben und Toggle-Selektoren mit denen ersetzen.

Answer 3

Bearbeiten

Ich mag mgroves Lösung besser für Ihren speziellen Anwendungsfall, aber ich werde meine Antwort überlassen, was erklärt, wie Sie den Index und das Element als Parameter auf der .each Methode akzeptieren

ORIGINAL ANTWORT

Wie schon andere gesagt haben, ist der Kontext von diese ist nicht das, was Sie denken, es an dem Punkt ist, in dem Sie es verweisen. Hier ist ein großer Artikel von Remy Sharp Titel „ jQuery dies: entmystifiziert “, die ich empfehle Ihnen zu lesen.

die .each Funktion können zwei Parameter akzeptieren, die sehr helfen wird, und Sie werden, dass die Anordnung von Zahlen nicht benötigen.

$('span[id^=toggle']').each(function(idx, elem) {

    // idx is the current index of the jQuery object
    $('#toggle' + idx).click(function() {

        // elem is the current element
        $(elem).next('#toggle' + idx + 'Container').slideToggle('slow');

        if ($(elem).html() == '+') {
            $(elem).html('-');
        } else {
            $(elem).html('+');
        }

    });

});

Answer 4

Ich würde vorschlagen, eine Klasse auf dem Umschaltknopf (Span) wie „toggler“ und Ihre Toggle-Container wie „Container“ oder etwas in Ordnung zu bringen Ihr Javascript zu vereinfachen:

$(function() {
    // hide all containers first
    $(".container").hide();
    // now the toggle buttons
    $(".toggler").click(function() {
          var container = $("#" + $(this).attr("id") + "Container");
          container.slideToggle("slow");

          $(this).html(container.is(":visible") ? "-" : "+");
    });
});

Geben Sie

, dass ein Schuss.

Answer 5

Wie mgroves sagte: Ihr Umfang wird immer alle aufgebockt unter Verwendung von each (). Siehe diese für weitere Informationen.

Answer 6

Ich wollte genau nach, was Max hat eine Klasse zu verwenden. Ich würde nur seinen Vorschlag mit diesem einfachen Wähler verbessern, den Behälter zu finden:

$(function() {
  // hide all containers first
  $(".container").hide();
  // now the toggle buttons
  $(".toggler").click(function() {
    $(this).next().slideToggle("slow");

    if (container.is(":visible")) {
      $(this).html("-");
    }
    else {
      $(this).html("+");
    }
  });
});

Wenn Sie nicht einfach die Klassen auf den Spannweiten bekommen können, können Sie wahrscheinlich einen ähnlichen Wähler mit so etwas wie $ ( ‚# SpanContainer> Spanne‘) konstruieren sie von Tag-Namen zu wählen, von dessenderen Aufnahmeelement absteigend.

Answer 7

Sie sollten Ihre Elemente eine Klasse geben, die auf gesucht werden kann, dann Verwendung von next machen.

Machen Sie Ihre Markup etwas wie folgt aus:

<span class="toggleButton">+</span>
<div class="toggleContainer">
   blablabla...
<div>

Nun, Ihren Code zu handhaben wird so einfach wie folgt aus:

$('.toggleButton').click(function() {
    $(this).next('.toggleContainer').slideToggle('slow');
});

Answer 8

Ich schrieb vor kurzem eine ziemlich wesentliche Skript für das Verhalten nur so. Ich nahm einen etwas anderen Weg, dass ich wählte alle Elemente eines bestimmten hide / show Element in einem enthalten div zu wickeln. Es ermöglicht Ihnen, mehrere „Trigger“ für einen Abschnitt zu haben, wenn Sie es brauchen, und Sie können eine beliebige Anzahl von hide / show Elemente hinzufügen, ohne sich Gedanken über sie Nummerierung. Ich würde strukturieren es so etwas wie folgt aus:

<div class="expSecWrapper">
    <div class="expSecTrigger">Insert Trigger Here</div>
    <div class="expSecBody">
        Content to hide/show
    </div>
</div>

Und dann würde der jQuery-Code so etwas wie diese:

$(document).ready(function(){
    var targets = $(".expSecWrapper")
    targets.find(".expSecTrigger").click(function(){
        targets.find(".expSecBody").hide()
        $(this).parents(".expSecWrapper").eq(0).children(".expSecBody").toggle();
    })
})

Sie können in den übrigen relevanten JS für Ihre Anwendung hinzuzufügen.

Es hat ein paar Einschränkungen, wie die Notwendigkeit, dass der hide / show Körper ein direkter Nachkomme der Umhüllung ist. Es kann zum Drop-downs angewendet werden, Optionsfelder, was auch immer. Es ist auch Nest der Lage, so dass Sie mehrere Ebenen, wenn hide / show haben kann.

Eine letzte Sache ist, dass Sie tatsächlich, dass das Verhalten nicht einmal müssen die .each Iterator verwenden zuzuweisen. So etwas wie .click () wird das Verhalten einer ganzen Gruppe von jQuery Objekte zuweisen. Solange Sie einen Selektor verwenden, die alle Ihre Ziele greifen wird.

Sorry, hatte zu bearbeiten, dass ein paar mal.