jQuery.each () guai

Question

Cercherò di tenere questo breve. Sto cercando di creare caselle di testo che nascondere o mostrare quando l'utente fa clic su un pulsante di espansione. Sto usando il metodo di commutazione ().

Il codice è simile a questo:

<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

Il # toggle0 si suppone per alternare la # toggle0Container, il # toggle1 alterna il # toggle1Container e così via. Tutto questo è generata da PHP quindi ci può essere un numero qualsiasi di questi contenitori.

Ecco il codice jQuery:

$(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('+');
            }
        });
    });
});

Si lavora ad eccezione della parte commutazione (ho aggiunto un commento di sopra della linea che non funziona). Dov'è il problema?

Answer 1

Vorrei seguire l'approccio di mgroves, ma se si vuole veramente fare la cosa array, o semplicemente si vuole capire come utilizzare ogni () correttamente, ecco come si dovrebbe usare:

$(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

È perché "questo" è ora in un ambito diverso, e si riferisce al reale elemento #toggleN DOM, non uno dei numeri nella matrice.

Vorrei suggerire di fosso la matrice di numeri, e utilizzare un selettore di diverso, qualcosa di simile:

$("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
}

Proprio fosso quelle eachs e sostituire selettori a levetta con quelli.

Answer 3

Modifica

Mi piace mgroves soluzione migliore per il vostro particolare caso d'uso, ma io lascerò la mia risposta up che spiega come si può accettare l'indice e l'elemento come parametro sul metodo .each

risposta iniziale

Come altri hanno detto, il contesto di questo non è quello che si pensa che è in corrispondenza del punto in cui si fa riferimento è. Qui è un grande articolo di Remy Sharp intitolato " jQuery di questo: demistificato " che vi consiglio di leggere.

la funzione .each può accettare due parametri che saranno di grande aiuto fuori e non sarà necessario che la matrice di numeri.

$('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

Vorrei suggerire mettere un corso sul pulsante di commutazione (arco) come "toggler" e il contenitore a ginocchiera come "contenitore" o qualcosa del genere, al fine di semplificare il javascript:

$(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") ? "-" : "+");
    });
});

Dare che un colpo.

Answer 5

Come mgroves detto, il vostro scopo è ottenere tutti jacked up utilizzando ciascuna (). Vedere questo per ulteriori informazioni.

Answer 6

Stavo per inviare esattamente quello che Max ha fatto sull'utilizzo di una classe. Vorrei solo migliorare la sua proposta con questo selettore più facile trovare il contenitore:

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

Se non si può facilmente ottenere le classi sulle campate, probabilmente si può costruire un selettore di simile usando qualcosa come $ ( '# SpanContainer> arco') per selezionarle in base al nome di tag, scendendo dal loro elemento che contiene.

Answer 7

Si dovrebbe dare gli elementi di una classe che può essere cercato, poi fare uso di next.

Fai la tua marcatura qualcosa di simile:

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

Ora, il codice per gestire questa situazione diventa semplice come questo:

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

Answer 8

Recentemente ho scritto una sceneggiatura abbastanza consistente per il comportamento proprio come questo. Ho preso un percorso leggermente diverso che ho scelto di avvolgere tutti gli elementi di un dato elemento Mostra / Nascondi in un div contenitore. Esso permette di avere più "trigger" per una sezione se ne avete bisogno, ed è possibile aggiungere un numero arbitrario di Nascondi / Mostra elementi senza preoccuparsi di loro numerazione. Vorrei strutturarlo qualcosa di simile:

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

E poi il codice jQuery sarebbe qualcosa di simile a questo:

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

È possibile aggiungere nei restanti JS rilevanti per l'applicazione.

Si presenta alcune limitazioni, quali la necessità che il corpo nascondi / mostra è un discendente diretto dell'involucro. Esso può essere applicato a elenchi a discesa, pulsanti di opzione, qualunque sia. E 'anche il nido-in grado in modo da poter avere più livelli se Mostra / Nascondi.

Una cosa finale è che in realtà non hanno nemmeno bisogno di usare l'iteratore .each per assegnare tale comportamento. Qualcosa di simile .Click () assegnerà comportamento di un intero gruppo di oggetti jQuery. Fino a quando si utilizza un selettore che catturerà tutti i tuoi obiettivi.

Siamo spiacenti, ha dovuto modificare che un paio di volte.