jQuery.each () problemas

Question

Voy a tratar de mantener este corto. Estoy intentando crear cuadros de texto que ocultar o mostrar cuando el usuario hace clic en un botón de expansión. Estoy usando el método de palanca ().

El marcado es la siguiente:

<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

El # toggle0 se supone que alternar el # toggle0Container, el # toggle1 alterna el # toggle1Container y así sucesivamente. Todo esto se genera por PHP lo que puede haber cualquier número de estos contenedores.

Aquí está el código 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('+');
            }
        });
    });
});

Funciona con excepción de la parte conmutación (He añadido comentario sobre la línea de que no funciona). ¿Dónde está el problema?

Answer 1

Me gustaría seguir el enfoque de mgroves pero si realmente quiere hacer la cosa matriz, o simplemente quiere encontrar la manera de utilizar cada uno () correctamente, he aquí cómo se debe utilizar:

$(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 porque "este" se encuentra ahora en un ámbito diferente, y se refiere al elemento de #toggleN DOM real, no uno de los números de la matriz.

Yo sugeriría que zanja la matriz de números, y utilizar un selector diferente, algo como:

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

Sólo zanja esos eachs y vuelva a colocar los selectores de palanca con ellos.

Answer 3

Editar

Me gusta mgroves mejor solución para su caso en particular, pero voy a dejar mi respuesta hasta que explica cómo se puede aceptar el índice y el elemento como parámetro en el método each

Respuesta original

Como han dicho otros, el contexto de este no es lo que creo que está en el punto en el que se hace referencia a ella. Aquí es un gran artículo de Remy de Sharp titulado " de este jQuery: desmitificado " que le recomiendo que lea.

la función each puede aceptar dos parámetros que ayudarán en gran medida a cabo y no será necesario que el conjunto de números.

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

Yo sugeriría poner una clase en su botón de activación (Span) como "toggler" y su contenedor de palanca como "contenedor" o algo con el fin de simplificar su 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") ? "-" : "+");
    });
});

deis un tiro.

Answer 5

Como dijo mgroves, su ámbito está recibiendo todo jacked mediante el uso de cada uno (). Ver este para más información.

Answer 6

estaba a punto de publicar exactamente lo que Max hizo sobre el uso de una clase. Yo sólo mejorar su sugerencia con este selector más fácil encontrar el contenedor:

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

Si no se puede conseguir fácilmente las clases en los vanos, es probable que pueda construir un selector similar usando algo así como $ ( '# SpanContainer> lapso') para seleccionarlos por nombre de la etiqueta, que desciende de su elemento contenedor.

Answer 7

Se debe dar a sus elementos de una clase que se pueden buscar en, a continuación, hacer uso de next.

Haga su marcado algo como esto:

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

Ahora, su código de manejar esto es tan simple como esto:

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

Answer 8

Hace poco escribí un guión bastante importante para el comportamiento al igual que este. Tomé una ruta ligeramente diferente, ya que he elegido para envolver todos los elementos de un elemento de ocultar / mostrar dada en un div que contiene. Se le permite tener múltiples "disparadores" para una sección, si lo necesita, y se puede añadir un número arbitrario de elementos de ocultar / mostrar sin tener que preocuparse acerca de la numeración de ellos. Me estructurarlo algo como esto:

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

Y a continuación, el código jQuery sería algo como esto:

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

Se puede agregar en los restantes JS relevantes para su aplicación.

Tiene algunas limitaciones, tales como la necesidad de que el cuerpo ocultar / mostrar es un descendiente directo de la envoltura. Se puede aplicar a menús desplegables, botones de radio, lo que sea. También es capaz de nido por lo que puede tener varios niveles si ocultar / mostrar.

Una última cosa es que en realidad ni siquiera es necesario utilizar el iterador each para asignar ese comportamiento. Algo así como .click () asignará el comportamiento de todo un grupo de objetos jQuery. Como siempre y cuando utilice un selector que agarrar todos sus objetivos.

Lo siento, tenía que editar de que un par de veces.