單擊 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>