Question

hola que tal. he hecho un botón carrito al cual cuando le hacen click el texto cambia, el problema es que el texto en los demás botones carrito cambia también, lo que quiero hacer es que solo cambie únicamente el texto del boton al que se le hizo click, les dejo el codigo:

PHP

$registros2=mysqli_query($conexion,"select id_producto, nombre, precio, descripcion, id_categoria from productos where inicio=1 LIMIT ".$inicio."," . $TAMANO_PAGINA);

                <?php
                  while($fila2=mysqli_fetch_array($registros2)){
                    $registros3=mysqli_query($conexion,"select nombre from imagenes where id_producto='$fila2[id_producto]' and prioridad=1");
                    $fila3=mysqli_fetch_array($registros3);
                ?>

                <article class="articulo wow fadeInUp" id="article">
                    <a href="detalles_producto.php?id_categoria=<?php echo $fila2['id_categoria']; ?> & id_producto=<?php echo 
    $fila2['id_producto']; ?>"><img src="img/<?php if(mysqli_num_rows($registros3)>0) echo $fila3['nombre']; else echo "sin-imagen.jpg"; ?>"></a>
                </article>

               <div class="articulo2 wow fadeInUp" data-wow-delay=".1s" id="article">

                    <div class="contenidoArticulo">
                        <h2><?php echo utf8_encode($fila2['nombre']); ?></h2>
                        <p><?php $array=explode(" ",utf8_encode($fila2['descripcion']));
                        for($i=0;$i<count($array);$i++){
                          echo $array[$i]." ";
                          } ?></p>
                        <div class="botonDetalles">
                          <a href=""><?php echo $fila2['precio']."$"; ?></a>
                        </div>
                        <form class="formCarrito" name="formAnadirCarrito" id="formAnadirCarrito<?php echo $fila2['id_producto']; ?>">

                            <input type="text" name="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
                            <input type="text" name="precio_producto" value="<?php echo $fila2['precio']; ?>">
                            <input type="text" name="cantidad_producto" value="1" maxlength=2>
                            <button type="button" onclick="anadirAlCarrito('formAnadirCarrito<?php echo $fila2['id_producto']; ?>')" 
                             class="botonCarrito">Añadir al carrito</button>
                        </form>
                    </div> 

                </div>
                <?php
                }
                cerrarconexion(); 
                ?>

JS

function anadirAlCarrito(f){
    var form=document.getElementById(f);
    var nombre_producto=form.elements.nombre_producto.value;
    var precio_producto=form.elements.precio_producto.value;
    var cantidad_producto=form.elements.cantidad_producto.value;

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,
            "cantidad_producto":cantidad_producto},

        beforeSend:function(){

        $(".botonCarrito").html('añadiendo...');

        },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
                    $(".botonCarrito").html('añadido');
            }

        });
}

Answer 1

En vez de usar la clase del boton usa un id

<button id='botonEjemplo'></button>

$("#botonEjemplo").html('añadiendo...');