单击 Javascript 后如何停用按钮

Question

如果照片被喜欢（点击）一次，我想停止增加个人喜欢的数量，并增加每张喜欢（点击）的个人照片的喜欢总数

个人照片likesAfterAddition
全球照片喜欢globalNumberOfLikes

目前，每次点击个人和全球喜欢时它都会增加，我知道这不是正确的逻辑！

请问我可以使用什么逻辑？

//increment likes on click
function incrementLikesOnClick() {
  const heartIcons = Array.from(document.getElementsByClassName('heartIcon')); // multiple heart icons
  heartIcons.forEach((likeIcon, index) => likeIcon.addEventListener('click', () => {

    const individualLikeBox = document.getElementsByClassName('under-photo-info');
    const totalLikesDivBox = document.getElementById("likesBox");
    likeIcon.classList.add('activeRed');

    let likesAfterAddition = likesTable[index] + 1;  // add 1 like to the individual current photo
    likesTable.splice(index, 1, likesAfterAddition); // replace the old value from the Array with the new value

    let sum = likesTable.reduce(function(a, b){return a + b;}); // return the sum of the array
    let globalNumberOfLikes = sum; // the sum of the array

    individualLikeBox[index].innerHTML = `<span'>${likesAfterAddition}</span>`
    totalLikesDivBox.innerHTML = `<div class="Likes">${globalNumberOfLikes}<i class="fas fa-heart"></i></div>`
    console.log(likesTable)
  }))
}

Answer 1

而不是使用 for 循环来设置效率不高的事件监听器

可以使用冒泡的特性，所以当点击任意一个dom元素时，事件会依次冒泡其父元素，直到到达父dom

//increment likes on click
function incrementLikesOnClick() {
    document.addEventListener("DOMContentLoaded", function(event) {
        // Your code to run since DOM is loaded and ready
        document.addEventListener('click', () => {
            let clicked = event.target;
            
            //element with class heartIcon is clicked and it doesnt have activeRed class
            if(clicked.classList.contains('heartIcon') && !clicked.classList.contains('activeRed')){
                let productContainer = clicked.parentElement.parentElement; // till you reach the product container
                
                const individualLikeBox = productContainer.getElementsByClassName('under-photo-info');
                const totalLikesDivBox = productContainer.getElementById("likesBox");
                clicked.classList.add('activeRed');

                // ..whatever extra logic you want to add
            }
        });
    });
}

Answer 2

如果喜欢的图标是一个按钮（我假设它是）。 你可以添加一个“禁用”属性作为事件处理程序的一部分（对于“点击”事件监听器）。

'当存在时，它指定按钮应该被禁用。

禁用的按钮不可用且不可点击。 （来源）

Answer 3

我会根据每个按钮上是否存在“活动” class 来计算总点赞数。

 const totalLikesEl = document.querySelector('#total-likes'); const updateTotalLikes = () => { totalLikesEl.textContent = document.querySelectorAll('.like.active').length; }; const toggleLike = (e) => { const button = e.currentTarget.classList.toggle('active'); updateTotalLikes(); }; document.querySelectorAll('.like').forEach(likeBtn => { likeBtn.addEventListener('click', toggleLike); });

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; }.cards { display: flex; flex-direction: row-wrap; justify-content: center; }.card { display: flex; flex-direction: column; padding: 0.25em; margin: 0.5em; border: thin solid grey; }.card-content { background: grey; width: 6em; height: 6em; }.card-actions { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 0.5em; }.like >.fa-heart { color: grey; }.like.active >.fa-heart { color: red; }.example-1.card-content { background: rgb(63,94,251); background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,168,1) 100%); }.example-2.card-content { background: rgb(251,63,94); background: radial-gradient(circle, rgba(251, 63,94,1) 0%, rgba(168,252,70,1) 100%); }.example-3.card-content { background: rgb(94,63,251); background: radial-gradient(circle, rgba(94,63,251,1) 0%, rgba(70,252,168,1) 100%); }.status { text-align: center; margin-top: 0.5em; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/> <div class="cards"> <div class="card example-1"> <div class="card-content"></div> <div class="card-actions"> <button class="like"> Like <i class="fas fa-heart"></i> </button> </div> </div> <div class="card example-2"> <div class="card-content"></div> <div class="card-actions"> <button class="like"> Like <i class="fas fa-heart"></i> </button> </div> </div> <div class="card example-3"> <div class="card-content"></div> <div class="card-actions"> <button class="like"> Like <i class="fas fa-heart"></i> </button> </div> </div> </div> <div class="status"> <strong>Total Likes:</strong> <span id="total-likes">0</span> </div>