0

Estoy haciendo un botón me gusta, y he tenido problemas para que se sume + 1 cuando le dan clic independientemente de que cantidad ya esta en el contador, porque al traer los productos y como los datos son dinámicos se repite el botón y el evento en cada uno de los botones y si le das clic se refleja en todos los demás, pero me dieron una solución agregarle el id del producto al evento del contador, pero al revisar la consola me esta regresando un NaN, o si me podrían ayudar con otra idea para que al darle clic solo haga + 1 en ese botón y no se refleje en los demás.

Este es el script que estoy usando:

$(".contador").click(function(){

var idProducto = $(this).attr("idProducto");
//console.log("idProducto", idProducto);

var cantidad = parseInt($("#cantidad"+idProducto).html()) + 1;
console.log("cantidad", cantidad);

document.getElementById($("#cantidad"+idProducto).html(cantidad));

});

2 respuestas 2

1

El nombre de tu propiedad debe de ser id.

var idProducto = $(this).attr("id");

Y cambia tu ultima línea que carga la cantidad. Estas mezclando js con Jquery.
Javascript.

document.getElementById("cantidad"+idProducto).innerHTML = cantidad;

jQuery

$("#cantidad"+idProducto).html(cantidad);
4
  • Ya cambie la propiedad y el id de cada boton tiene el id del producto y en la consola ya me sale la variable cantidad 1 pero en el contador no me hace la sumatoria, se queda en 0.
    – sagitorr
    Commented el 27 sept. 2018 a las 19:00
  • ya agregue lo ultimo
    – farsSharp
    Commented el 27 sept. 2018 a las 19:15
  • Ya lo modifique como me dices y en la consola sale la variable cantidad en 1, pero en el html el contador se queda en 0.
    – sagitorr
    Commented el 27 sept. 2018 a las 19:20
  • Y si debuggeas por medio del selector,¿que resultado te da?
    – farsSharp
    Commented el 27 sept. 2018 a las 19:25
0

Vale, aquí hay varios problemas, y entiendo lo que quieres lograr pero tal vez de igual manera deberías colocar un Ejemplo mínimo, completo y verificable para que sea mas explicito y podamos ver la ejecución del problema.

Para lo que quieres hacer puede que sea tan sencillo, como colocar en tus elementos un atributo para identificarlos o relacionarlos con los botones que ejecutan el script.

El primer problema que observo imagino que es un error de interpretación, puesto a que colocas var idProducto = $(this).attr("idProducto");. Si quieres obtener el atributo de un elemento solo tienes que colocar el nombre que identifica al atributo, ya sea rel, id, class, etc. y no el nombre que le otorgues de este atributo en si, quedando de la siguiente manera var idProducto = $(this).attr("id");

El segundo problema es que estas obteniendo el atributo de $(this) dentro de una función que se esta ejecutando en tu clase .contador, por lo que siempre estas obteniendo la id del elemento contador, no de los elementos que quieres, esto es correcto si quieres obtener la id del elemento que se esta pulsando actualmente.

El tercer problema, es que probablemente si solo estas lanzando un console.log() no estas actualizando la información en el DOM, por lo que si estas recibiendo un error de una suma o de parse no se va actualizar, esto nada mas es un dato.

Y por ultimo la suma un poco rara que utilizas del idProducto + la id del elemento.Te estas complicando mucho para relacionar elementos, por eso te propongo la siguiente lógica:

Coloca un attr rel en tus botones que coincida con la id de tus elementos:

<div>
  <h1 id="elemento1" class='contador'>0</h1>
  <button rel="elemento1" class="boton">like</button>
</div>

<div>
  <h1 id="elemento2" class='contador'>0</h1>
  <button rel="elemento2" class="boton">like</button>
</div>

<div>
  <h1 id="elemento3" class='contador'>0</h1>
  <button rel="elemento3" class="boton">like</button>
</div>

Acciona el script con click

Aquí solo es necesario que manejes las suma por una variable e identifiques que boton se esta ejecutando a través del attr rel para así pasarle la información a tu elemento que coincida por su id.

$("button").click(function(){

  var relProducto = $(this).attr("rel");
  //var idProducto = $(".contador").attr("id"); -- No es necesario. 
  var currentLikes = $("#"+relProducto).html();
  currentLikes = parseInt(currentLikes);
  currentLikes++;
  $("#"+relProducto).html(currentLikes); // Actualiza la informacion de otra manera siempre sera el mismo numero.

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1 id="elemento1" class='contador'>0</h1>
  <button rel="elemento1" class="boton">like</button>
</div>

 <div>
  <h1 id="elemento2" class='contador'>0</h1>
  <button rel="elemento2" class="boton">like</button>
</div>

<div>
  <h1 id="elemento3" class='contador'>0</h1>
  <button rel="elemento3" class="boton">like</button>
</div>

Espero que te sea de ayuda!

4
  • Muchas gracias por tu respuesta tan bien explicada, ya me hace la funcion en cada boton, solo te queria preguntar como le hago para que ya no siga contando despues de un clic? porque el boton solo le puedes dar clic una vez y si le das otro clic ya verifica en la base de datos y te dice que ya no puedes calificar, pero la funcion que me pasaste sigue contando..
    – sagitorr
    Commented el 27 sept. 2018 a las 21:01
  • No le hagas caso al ultimo comentario, ya lo pude arreglar, muchas gracias!!
    – sagitorr
    Commented el 27 sept. 2018 a las 21:10
  • Para hacer eso, tienes que crear una manera de almacenar datos ya sea en local como en la misma base de datos, condicionarlo en el front no tiene mucho sentido, sin embargo lo que puedes hacer en front seria algo como: Agrega una clase que se llame por ejemplo "disponible" y dentro de la funcion click usa un toggleClass a tu botón que cambie la clase disponible, por inactivo entonces condiciona luego algo como: Commented el 27 sept. 2018 a las 21:12
  • if (boton.hasClass("inactivo")){boton.attr("disabled"," disabled")} o algo que no permita el uso del boton mas de una vez, si quieres tambien podrias utilizar cookies para almacenar datos, y asi mientras el usuario este en sesión no pueda o pueda hacer ciertas cosas. Commented el 27 sept. 2018 a las 21:16

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.