使用JavaScript为多个元素切换like按钮可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<button class="like-button">Like</button>
<button class="like-button">Like</button>
<button class="like-button">Like</button>
JavaScript:
// 选择所有的like按钮元素
var likeButtons = document.getElementsByClassName('like-button');
// 为每个like按钮添加点击事件监听器
for (var i = 0; i < likeButtons.length; i++) {
likeButtons[i].addEventListener('click', function() {
// 切换like按钮的状态
if (this.classList.contains('liked')) {
this.classList.remove('liked');
this.textContent = 'Like';
} else {
this.classList.add('liked');
this.textContent = 'Liked';
}
});
}
在上述示例中,我们首先选择所有具有class为"like-button"的元素,并为每个元素添加了一个点击事件监听器。当点击按钮时,通过切换CSS类和改变按钮的文本内容来切换like按钮的状态。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云