Así que lamento que el título sea tan vago que ni siquiera estoy seguro de cómo formular esta pregunta en pocas palabras.

Así que tengo un formulario para agregar elementos a una tienda web. Dentro de esa forma está la opción de agregar diferentes variedades de un producto, por ejemplo, diferentes tamaños o colores para la ropa, etc.

Solo quería ofrecer un campo para la primera carga de variedad, luego tener un botón 'agregar' para mostrar un campo adicional para cada variedad deseada adicional.

Después de hacer clic en el botón Agregar, el antiguo botón Agregar se convierte en un botón Restar, y se agregan un nuevo campo de entrada y un nuevo botón Agregar al anterior.

Me gustaría que este proceso funcione continuamente.

Al agregar el primer campo nuevo, el proceso funciona perfectamente, sin embargo, agregar elementos adicionales no funciona como se esperaba. Se agregan los nuevos campos, así como los nuevos botones de agregar, sin embargo, los viejos botones de agregar no se convierten en botones de sustracción. Realmente no estoy seguro de cuál es el problema aquí. No soy exactamente un mago jquery.

Aquí está la parte relevante del formulario:

<label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />

Y aquí está el jquery que he escrito:

    $('a.add-variety').click(function() {
    $(this).removeClass('add-variety');
    $(this).addClass('subtract-variety');
    $(this).append('<br /><input type="text" name="varieties[]" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a>');
    $(this).children('img').attr('src','../img/minus.png');
    return false;
});

¡Muchas gracias por cualquier ayuda!

0
seventeen 3 nov. 2009 a las 08:19

4 respuestas

La mejor respuesta

Su función "agregar variedad" solo está vinculada al elemento ".add-variety" una vez, cuando se carga la página. Los botones de "agregar variedad" recién creados no tienen ningún código vinculado a ellos, ya que se crean después de que la página se ha cargado. Es posible que desee utilizar la función live en lugar de {{X1} }.

Otro problema, como señaló, es que está agregando líneas adicionales dentro de su elemento a en lugar de después.

Recomiendo envolver todo en una etiqueta div para darle fácil acceso a cada línea. Esto le permitirá eliminar algunos códigos duplicados copiando el HTML de una línea existente, en lugar de incluirlo nuevamente en su código JavaScript.

Aquí está mi versión propuesta:

<div>
     <label for="varieties">Varieties</label><input type="text" name="varieties[]" id="varieties1" value="Default" /> <a href="#" class="add-variety"><img src="../img/plus.png" alt="Add" title="Add Another Variety" /></a><br />
</div>

Y jQuery:

$(function() {
    $('a.add-variety').live('click', function() {
        $(this).removeClass('add-variety');
        $(this).addClass('subtract-variety');

        var parent = $(this).parent();
        parent.after($('<div />').html(parent.html()));

        $('img', this).attr('src','../img/minus.png');
    });
});

He utilizado $(string, element) en lugar de children para obtener acceso a la subimagen. No estoy seguro de si esto ayudará con el problema de la imagen negativa, pero he encontrado que este formulario parece funciona un poco mejor, ya que incluye todos los subelementos coincidentes de un elemento, no solo los elementos secundarios inmediatos.

4
Tobias Cohen 3 nov. 2009 a las 05:46

Para responder a su segunda pregunta:

Puede realizar la manipulación en el nivel 'padre':

$('a.add-variety').parent().click(function() {
    ...
});
0
Trav L 3 nov. 2009 a las 05:36

$ (this) .append dice agregar algo al CONTENIDO del elemento actual (en este caso, el).

$ (esto) .después puede ser lo que estás buscando ...

Además, los nuevos elementos agregados al dom no tendrán controladores de clics, por lo que también deberá aplicar el código del controlador de clics a los nuevos elementos.

0
Jon Bristow 3 nov. 2009 a las 05:34

Lo siento, todavía no tengo una respuesta a tu pregunta, pero tengo una consulta que me molesta ...

¿No tendría más sentido 'anteponer' un botón de resta? Entonces su código será:

$('a.add-variety').click(function() {
$(this).prepend('<input type="text" name="varieties[]" value="Default" /> <a href="#" class="subtract-variety"><img src="../img/minus.png" alt="Reomve" title="Remove a Variety" /></a><br/>');

});

Y no creo que esté destinado a 'devolver' nada en este bloque de consulta.

0
Trav L 3 nov. 2009 a las 05:29