在带有按钮的循环中,仅在单击的按钮中切换类on_click,可以通过以下步骤实现:
以下是一个示例代码,展示了如何在带有按钮的循环中仅在单击的按钮中切换类on_click:
HTML代码:
<!-- 假设有三个按钮 -->
<button class="button">按钮1</button>
<button class="button">按钮2</button>
<button class="button">按钮3</button>
JavaScript代码:
// 获取所有按钮元素
var buttons = document.getElementsByClassName("button");
// 为每个按钮添加事件监听器
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(event) {
// 获取被单击的按钮
var clickedButton = event.target;
// 切换类on_click
if (clickedButton.classList.contains("on_click")) {
clickedButton.classList.remove("on_click");
} else {
clickedButton.classList.add("on_click");
}
});
}
在这个示例中,我们首先通过document.getElementsByClassName("button")获取所有的按钮元素,并使用for循环为每个按钮添加了一个click事件监听器。在事件处理函数中,我们通过event.target获取到了被单击的按钮,并使用classList属性来添加或移除类on_click。当按钮已经具有类on_click时,我们移除该类;当按钮还没有类on_click时,我们添加该类。
请注意,以上代码只是一个示例,实际项目中需要根据具体需求进行适当的修改和扩展。
【推荐的腾讯云相关产品和产品介绍链接地址】 腾讯云提供了一系列云计算相关的产品和服务,包括云服务器、云数据库、云存储、人工智能等。您可以在腾讯云官方网站中查找更多详细信息和文档:
领取专属 10元无门槛券
手把手带您无忧上云