抱歉，我需要帮助。我想制作一个愿望 list 切换按钮，点击图标 - fa-heart 从轮廓变为实心。我已经做到了。我的问题是，工具提示(添加到愿望 list )应该在目标元素上更改为“添加到愿望 list ”。但相反，它正在改变数组的所有元素。如何停止此行为以使其仅在目标元素上发生变化？ 谢谢。
let i, j, toolTip;
let addItem;
for (i = 0; i < addToWish.length; i++) {
let addItem = addToWish[i];
function addToWishList() {
addItem.classList.add('fas');
addItem.classList.add('far');
favIconData++;
favDataOutput.textContent = favIconData;
navActionBadge.setAttribute('value', `${favIconData}`);
if (favIconData >= 1) {
favoriteIcon.classList.add('fas');
favoriteIcon.classList.remove('far');
} else {
favoriteIcon.classList.remove('fas')
favoriteIcon.classList.add('far')
}
}
function removeWishList() {
addItem.classList.remove('fas');
addItem.classList.add('far');
favIconData--;
favDataOutput.textContent = favIconData;
navActionBadge.setAttribute('value', `${favIconData}`);
if (favIconData >= 1) {
favoriteIcon.classList.add('fas');
favoriteIcon.classList.remove('far');
} else {
favoriteIcon.classList.remove('fas')
favoriteIcon.classList.add('far')
}
}
addItem.addEventListener('click', () => {
if (addItem.classList.contains('fas')) {
for (let j = 0; j < cardLabel.length; j++) {
let label = cardLabel[j];
label.textContent = 'Add to wishlist';
}
removeWishList()
} else {
for (let j = 0; j < cardLabel.length; j++) {
let label = cardLabel[j];
label.textContent = 'Added to wishlist';
}
addToWishList()
}
})
}<html>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<i id="fav" class="far fa-heart">.</i>
</button>
<div class="card-action-tooltip" id="card-label-3">Add to Wishlist</div>
</li>
</html>最佳答案
不要使用循环来更新所有标签。只需更改当前按钮后的标签即可。
addItem.addEventListener('click', () => {
let label = addItem.closest(".card-action-item").querySelector(".card-action-tooltip");
if (addItem.classList.contains('fas')) {
label.textContent = 'Add to wishlist';
removeWishList()
} else {
label.textContent = 'Added to wishlist';
addToWishList()
}
})
关于javascript - 当只有一个应该在点击时改变时，所有愿望 list 项目的文本都会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72493949/