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!