[英]How to deactivate button once clicked Javascript
I want to stop incrementing the number of individual likes if the photo was liked(clicked) once, and increment the total number of likes for each individual photo liked(clicked)如果照片被喜欢(点击)一次,我想停止增加个人喜欢的数量,并增加每张喜欢(点击)的个人照片的喜欢总数
individual photo likes likesAfterAddition
个人照片likesAfterAddition
global photo likes globalNumberOfLikes
全球照片喜欢globalNumberOfLikes
For the moment it is increasing every time I click in both individual and global likes, I know it is not the right logic!目前,每次点击个人和全球喜欢时它都会增加,我知道这不是正确的逻辑!
What logic can I use please?请问我可以使用什么逻辑?
//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)
}))
}
instead of using for loop to set event listeners which is not efficient而不是使用 for 循环来设置效率不高的事件监听器
you can use the feature of bubbling, so when any of dom element is clicked, the event will bubble up of its parent elements sequentially till it reaches the parent dom可以使用冒泡的特性,所以当点击任意一个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
}
});
});
}
If the like icon is a button (which I assume it is).如果喜欢的图标是一个按钮(我假设它是)。 U can just add a 'disabled' attribute to it as part of the event handler (for the 'click' eventListener).你可以添加一个“禁用”属性作为事件处理程序的一部分(对于“点击”事件监听器)。
'When present, it specifies that the button should be disabled. '当存在时,它指定按钮应该被禁用。
A disabled button is unusable and un-clickable.'禁用的按钮不可用且不可点击。 ( source ) (来源)
I would calculate the total likes based on the presence of an "active" class on each button.我会根据每个按钮上是否存在“活动” 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.