0

Debo realizar este código 6 veces más cambiando el número de cada id, por ejemplo cantidadproduct-1 que cambie a cantidadproduct-2 y así sucesivamente hasta 6. ¿Hay alguna forma de hacerlo con un bucle for? Todo esto en JS y jQuery.

Necesito también cambiar todas las variables que se encuentran numeradas (deben llegar hasta el 6). Estoy haciendo como un carrito de compra y tengo 6 productos, y necesito que ese código se aplique para cada producto. Por eso cada variable e Id posee un número.

Éste es el código:

var cantidadproduct1 = 0;
$('#btn-1').click(function() {

    //SE ACTUALIZA EL TOTAL
    total = total + parseInt($('#product1-price').text());
    $('#total').text(total);

    //SI ES LA PRIMERA VEZ QUE SE AGREGA EL PRODUCTO, SE ESCRIBE LA CANTIDAD "1", EN CAMBIO, SI YA SÉ AGREGÓ ANTERIORMENTE SOLAMENTE SE CAMBIA LA CANTIDAD EN EL CARRITO Y NO SE AGREGA OTRO <LI>.
    if (cantidadproduct1 == 0) {
        cantidadproduct1++;
        $('.cart-ul').append('<li id="product1-oncart" class="row justify-content-between item-inside-cart align-items-center mb-2"><span>' + ($('#product1-name').text()) + '</span><span>' + ($('#product1-price').text()) + '</span><span id="item-quantity-1" class="item-quantity d-block ml-3">x' + cantidadproduct1 + '</span><a href="#" id="delete-item-1" class="delete-item"><img class="delete-img" src="materiales/img/basura.png" alt="trash bin icon" tooltip="eliminar producto"></a></li>');
        var img1 = $("#item1-image").children("img").clone();
        $('#product1-oncart').prepend(img1);
        $('#total').text(total);

    } else if (cantidadproduct1 > 0) {
        cantidadproduct1++;
        $('#item-quantity-1').text('x' + cantidadproduct1);
    }


    //SI SE TOCA EL TACHO DE BASURA SE ELMINA EL RESPECTIVO PRODUCTO.--------------------
    $('#delete-item-1').unbind('click').click(function() {

        //SE RESTA LA CANTIDAD DEL PRODUCTO Y LA CANTIDAD GLOBAL.
        cantidadproduct1--;
        cantidad--;

        //SE ACTUALIZA EL INDICADOR DE ELEMENTOS EN EL CARRITO
        $('#cart-indicator').text(cantidad);
        $('#item-quantity-1').text('x' + cantidadproduct1);
        total = total - parseInt($('#product1-price').text());

        if(cantidadproduct1 == 0){
            $('#product1-oncart').remove();
        }

        $('#total').text(total);

        //SI NO HAY ELEMENTOS EN EL CARRITO APARECE UNA ILUSTRACIÓN --------
        if (cantidad == 0) {

            $('.empty-container').addClass('d-block');
            $('.empty-container').removeClass('d-none');
            $('.cart-buy').addClass('d-none').removeClass('d-flex');

        }

    });
8
  • ¿Te refieres a item-quantity-1 o product1-oncart o item1-image? Hay muchas variables con número en el código.
    – Alvaro Montoro
    Commented el 27 jul. 2019 a las 23:40
  • Exacto, necesito que cada una de esas variables que tengan un "1", vayan cambiando hasta el número 6. Commented el 27 jul. 2019 a las 23:42
  • ¿Y la variable cantidadproducto1? ¿Realmente no importa que sea numerada? Parece que es algo auxiliar
    – Alvaro Montoro
    Commented el 27 jul. 2019 a las 23:44
  • Todas las que se encuentran numeradas deben llegar hasta el 6, es que estoy haciendo como un carrito de compra y tengo 6 productos, y necesito que ese código se aplique para cada producto. Por eso cada variable e Id posee un número. Commented el 27 jul. 2019 a las 23:45
  • Ok. Como comentario aparte, ¿has pensado en usar un array para guardar esos valores? Simplificaría mucho el código y lo dejaría más ordenado
    – Alvaro Montoro
    Commented el 27 jul. 2019 a las 23:49

1 respuesta 1

1

La idea es básicamente envolver tu código en un bucle for que vaya de 1 a 6 (incluidos), luego en los selectores cambiar el 1 por el valor de la variable que estés usando. Esto lo puedes hacer varios modos, pero los dos más sencillos:

  1. Concatenando la variable a la cadena: "cadena" + variable + "cadena"
  2. Usando literales de plantilla: `cadena${variable}cadena`

Esto aplicado a tu código:

for (x = 1; x <= 6; x++) {

    var cantidadproduct1 = 0;
    $('#btn-'+x).click(function() {

        //SE ACTUALIZA EL TOTAL
        total = total + parseInt($('#product'+x+'-price').text());
        $('#total').text(total);

        //SI ES LA PRIMERA VEZ QUE SE AGREGA EL PRODUCTO, SE ESCRIBE LA CANTIDAD "1", EN CAMBIO, SI YA SÉ AGREGÓ ANTERIORMENTE SOLAMENTE SE CAMBIA LA CANTIDAD EN EL CARRITO Y NO SE AGREGA OTRO <LI>.
        if (cantidadproduct1 == 0) {
            cantidadproduct1++;
            $('.cart-ul').append('<li id="product'+x+'-oncart" class="row justify-content-between item-inside-cart align-items-center mb-2"><span>' + ($('#product'+x+'-name').text()) + '</span><span>' + ($('#product'+x+'-price').text()) + '</span><span id="item-quantity-1" class="item-quantity d-block ml-3">x' + cantidadproduct1 + '</span><a href="#" id="delete-item-'+x+'" class="delete-item"><img class="delete-img" src="materiales/img/basura.png" alt="trash bin icon" tooltip="eliminar producto"></a></li>');
            var img1 = $("#item'+x+'-image").children("img").clone();
            $('#product'+x+'-oncart').prepend(img1);
            $('#total').text(total);

        } else if (cantidadproduct1 > 0) {
            cantidadproduct1++;
            $('#item-quantity-'+x).text('x' + cantidadproduct1);
        }


        //SI SE TOCA EL TACHO DE BASURA SE ELMINA EL RESPECTIVO PRODUCTO.--------------------
        $('#delete-item-'+x).unbind('click').click(function() {

            //SE RESTA LA CANTIDAD DEL PRODUCTO Y LA CANTIDAD GLOBAL.
            cantidadproduct1--;
            cantidad--;

            //SE ACTUALIZA EL INDICADOR DE ELEMENTOS EN EL CARRITO
            $('#cart-indicator').text(cantidad);
            $('#item-quantity-'+x).text('x' + cantidadproduct1);
            total = total - parseInt($('#product'+x+'-price').text());

            if(cantidadproduct1 == 0){
                $('#product'+x+'-oncart').remove();
            }

            $('#total').text(total);

            //SI NO HAY ELEMENTOS EN EL CARRITO APARECE UNA ILUSTRACIÓN --------
            if (cantidad == 0) {

                $('.empty-container').addClass('d-block');
                $('.empty-container').removeClass('d-none');
                $('.cart-buy').addClass('d-none').removeClass('d-flex');

            }

        });

    }); 
}
5
  • Muchas gracias, pero como puedo aplicarlo a las demás variables como cantidadproduct1? Commented el 28 jul. 2019 a las 22:41
  • O sea, puedo aplicarlo también a las variables como img1 y cantidadproduct-1? Porque en el código que me enviaste no están cambiadas, es por alguna razón? Desde mil gracias, en serio. Commented el 28 jul. 2019 a las 23:25
  • @TobíasCorradi para eso te recomendaría tener un array (p.e. img o cantidadproduct)
    – Alvaro Montoro
    Commented el 29 jul. 2019 a las 0:28
  • No hay ninguna otra manera de hacerlo? Commented el 29 jul. 2019 a las 1:07
  • Y si los tuviera que hacer en un array cómo sería? Commented el 29 jul. 2019 a las 1:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.