Tengo un sitio web de estilo de redes sociales, que quiero tener una función similar para las publicaciones. Se supone que es muy simple por ahora.
Con este código, solo funciona el botón Me gusta de la primera publicación, entonces, ¿cómo los hago individuales, sin tener que reescribir el código mil veces?
JavaScript:
const getLike = document.querySelector('.like'); const getLikeNum = document.querySelector('.likeNum'); let like = 0; increaseLike = () => { like ++ getLikeNum.innerHTML = `${like}` } likeClick = () => { increaseLike() } getLike.addEventListener(('click'), likeClick)HTML:
<div id="opslag-gruppe"> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> </div>Tienes que usar querySelectorAll y luego usar forEach .
const likeButtons = [...document.querySelectorAll(".likeButton")]; let likeCount = 0; function like () { likeCount++; console.log(likeCount); } likeButtons.forEach(item => { item.addEventListener("click", like); }); <button class="likeButton">Like</button> <button class="likeButton">Like</button> <button class="likeButton">Like</button> <button class="likeButton">Like</button> <button class="likeButton">Like</button> <button class="likeButton">Like</button>Use querySelectorAll para obtener todos los elementos con clase like e itere sobre ellos.
Cuando itera sobre cada botón, haga que addEventListener devuelva una función (un cierre ) que inicializa el recuento y lo mantiene solo para ese botón. De esta manera no necesita variables globales.
// Set the intial like to 0 function likeClick(like = 0) { // Return a new function that is called when // the click on the button is called return function (e) { // Find the closest `bar` parent const bar = e.target.closest('.bar'); // Grab the `p` element within that parents child elements const likeNum = bar.querySelector('p'); // Update the like variable likeNum.textContent = ++like; } } // Cache the elements const getLike = document.querySelectorAll('.like'); // For every element add a listener that // calls the function that initialises the count and // returns the function that *is* called when the // button is clicked, and updates the count getLike.forEach(like => like.addEventListener('click', likeClick(), false)); <div id="opslag-gruppe"> <div class="opslag"> <div class="bar"> <button class="like"><img src="https://dummyimage.com/50x50/704a70/fff&text=Click" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="https://dummyimage.com/50x50/704a70/fff&text=Click" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="https://dummyimage.com/50x50/704a70/fff&text=Click" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> </div>Si usa querySelectorAll para encontrar TODOS los botones, puede asignar un controlador de eventos simple a cada uno y simplificar todo el proceso. Dicho esto, la cantidad de clics realmente debe almacenarse en algún lugar como una base de datos; de lo contrario, es efímero y dura solo mientras la página vista y es por persona. El problema con el registro de la cantidad de clics/me gusta en este ejemplo es que no hay identificadores únicos asignados a los elementos individuales en el contenedor principal...
document.querySelectorAll('button.like').forEach(bttn=>{ bttn.addEventListener('click',function(e){ this.nextElementSibling.textContent=Number( this.nextElementSibling.textContent ) + 1; }); }) <div id="opslag-gruppe"> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> <div class="opslag"> <div class="bar"> <button class="like"><img src="hjerte.png" class="hjerte"></button> <p class="likeNum">0</p> </div> </div> </div>