1

quisiera actualizar 2 campos con la misma clase pero con diferente valor, lo que pasa exactamente es que me captura el primer valor pero el segundo me detecta como si fuera el primero. Este es mi código HTML:

                              <td class="product-quantity">
                                  <div class="quantity">
                                    <input type="button" class="minus minusproduct" value="-">
                                    <input type="text" class="input-text qty text cantidadpedida" title="Cantidad" value="8" min="1" step="1">
                                    <input type="button" class="plus plusproduct" value="+">
                                    <input type="hidden" class="idcarrito" value="1">
                                  </div>
                              </td>
                              <td class="product-quantity">
                                  <div class="quantity">
                                    <input type="button" class="minus minusproduct" value="-">
                                    <input type="text" class="input-text qty text cantidadpedida" title="Cantidad" value="15" min="1" step="1">
                                    <input type="button" class="plus plusproduct" value="+">
                                    <input type="hidden" class="idcarrito" value="2">
                                  </div>
                              </td>

Y mi JS es el siguiente:

function actualicantidad()
{
    var cantidad = $('.cantidadpedida').val();
    var carrito = $('.idcarrito').val();
    $.ajax({
        url:"include/consultas/actualizar-cantidad.php",
        method:"POST",
        data:{cantidad:cantidad, carrito:carrito},
        success:function(r){
            r = r.trim();
            if(r == "true"){
            }else if(r == "false"){
                alertify.success("Error, Intentar de nuevo.");
            }
        }
    });
}

$('.minusproduct').click(function(){
    actualicantidad();
});

$('.plusproduct').click(function(){
    actualicantidad();
});

Ahorita con este código, solo me actualiza el primer carrito, pero el segundo ya no. Quisiera saber si hay una forma de detectar cada carrito porque cuando lo pruebo con alertas y cuando intento hacer la función en el segundo carrito, me sale el valor del primero. Ayuda porfa!

2 respuestas 2

1

No es suficiente con asignar el evento a cada botón, hay que saber qué botón fue el que recibió clic para realizar las acciones necesarias.

Principales cambios en tu código:

  • La función debe recibir el evento como parámetro para poder detectar qué botón lo disparó y, desde ahí, obtener el resto de elementos.
  • Al asignar evento a los botones, se proporciona directamente el nombre de la función, sin paréntesis y sin función anónima.

Revisa los comentarios en el código para ver los demás cambios y saber qué se hace en cada paso.

// En la función recibe el evento como parámetro
function actualicantidad(e) {
    // Obtener acción dependiendo de la clase del botón
    let accion = ($(e.target).hasClass('minusproduct')) ? 'resta' : 'suma';
    // Obtener el elemento padre desde el elemento que disparó el evento
    let div = $(e.target).closest('.quantity');
    // Obtener ID y cantidad, buscando desde el elemento padre
    let carrito = $(div).find('.idcarrito').val();
    let cantidad = parseInt($(div).find('.qty').val()) || 0;
    // Modificar cantidad de acuerdo a la acción
    if(accion == 'resta') {
        // Solo si la cantidad es igual o mayor que uno
        if(cantidad >= 1) {
            cantidad --;
        }
    } else {
        cantidad ++;
    }
    // Actualizar cantidad en input
    $(div).find('.qty').val(cantidad);
    // Comprobar datos:
    console.log(`ID: ${carrito}, Cantidad: ${cantidad}`);
    
    $.ajax({
        url:"include/consultas/actualizar-cantidad.php",
        method:"POST",
        data:{cantidad:cantidad, carrito:carrito},
        success:function(r){
            r = r.trim();
            if(r == "true"){
            }else if(r == "false"){
                alertify.success("Error, Intentar de nuevo.");
            }
        }
    });
}

// Asigna los eventos solo con el nombre de la función
$('.minusproduct').click(actualicantidad);
$('.plusproduct').click(actualicantidad);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="product-quantity">
                                  <div class="quantity">
                                    <input type="button" class="minus minusproduct" value="-">
                                    <input type="text" class="input-text qty text cantidadpedida" title="Cantidad" value="8" min="1" step="1">
                                    <input type="button" class="plus plusproduct" value="+">
                                    <input type="hidden" class="idcarrito" value="1">
                                  </div>
                              </td>
                              <td class="product-quantity">
                                  <div class="quantity">
                                    <input type="button" class="minus minusproduct" value="-">
                                    <input type="text" class="input-text qty text cantidadpedida" title="Cantidad" value="15" min="1" step="1">
                                    <input type="button" class="plus plusproduct" value="+">
                                    <input type="hidden" class="idcarrito" value="2">
                                  </div>
                              </td>

4
  • Muchas gracias! Lo estoy probando y si me funciona, solo que me sale de 2 en 2 pero estoy viendo para solucionarlo. el 19 feb. 2021 a las 16:20
  • Cuando probé el fragmento de código sí realizó bien las sumas y restas.
    – Triby
    el 19 feb. 2021 a las 16:21
  • O sea si funciona si lo pruebo normal, pero me sale doble cuando lo aplico en la parte de producción, pero lo estoy revisando para solucionarlo. el 19 feb. 2021 a las 16:25
  • Ok, perfecto, espero lo soluciones.
    – Triby
    el 19 feb. 2021 a las 16:28
0

Tenés que usar un identificador unico en el input de cada carrito y la actualizacion por ese id, te dejo más o menos una idea

function actualicantidad(idCarro)
{
    var cantidad = $('.cantidadpedida').val();
    var carrito = $(idCarro).val();
    $.ajax({
        url:"include/consultas/actualizar-cantidad.php",
        method:"POST",
        data:{cantidad:cantidad, carrito:carrito},
        success:function(r){
            r = r.trim();
            if(r == "true"){
            }else if(r == "false"){
                alertify.success("Error, Intentar de nuevo.");
            }
        }
    });
}

$('.minusproduct').click(function(){
    actualicantidad('#idCarro1');
});

$('.plusproduct').click(function(){
    actualicantidad('#idCarro2');
});

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.