在带有按钮的循环中:仅在单击的按钮中切换类on_click
在带有按钮的循环中，仅在单击的按钮中切换类on_click，可以通过以下步骤实现：
基础概念
- 事件监听：在JavaScript中，事件监听用于在特定事件发生时执行代码。
- 类切换：通过JavaScript操作DOM元素的类，可以动态地添加或移除类。
- 循环中的唯一标识：在循环中为每个按钮设置唯一的标识符，以便在事件处理程序中区分它们。
相关优势
- 用户体验：通过切换类来改变按钮的外观，可以直观地向用户反馈按钮的状态。
- 代码复用：使用事件委托可以减少内存占用，提高性能。
类型与应用场景
- 类型：这是一种常见的前端交互模式，适用于任何需要动态改变元素状态的场景。
- 应用场景：导航菜单、选项卡切换、表单提交按钮等。
示例代码
以下是一个完整的示例，展示了如何在循环中为每个按钮添加点击事件，并仅在点击的按钮上切换类on_click：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Click Example</title>
<style>
.on_click {
background-color: yellow;
}
</style>
</head>
<body>
<div id="button-container">
<!-- Buttons will be generated here -->
</div>
<script>
// Function to create buttons and add event listeners
function createButtons(numButtons) {
const container = document.getElementById('button-container');
for (let i = 0; i < numButtons; i++) {
const button = document.createElement('button');
button.textContent = `Button ${i + 1}`;
button.classList.add('button');
button.addEventListener('click', () => {
// Remove 'on_click' class from all buttons
const allButtons = document.querySelectorAll('.button');
allButtons.forEach(btn => btn.classList.remove('on_click'));
// Add 'on_click' class to the clicked button
button.classList.add('on_click');
});
container.appendChild(button);
}
}
// Create 5 buttons
createButtons(5);
</script>
</body>
</html>解释
- HTML结构：一个
div容器用于存放动态生成的按钮。 - CSS样式：定义了一个
.on_click类，用于改变按钮的背景颜色。 - JavaScript逻辑：
createButtons函数生成指定数量的按钮，并为每个按钮添加点击事件监听器。- 在点击事件处理程序中，首先移除所有按钮的
on_click类，然后为被点击的按钮添加该类。
遇到的问题及解决方法
问题：如果页面中有很多按钮，直接为每个按钮添加事件监听器可能会导致性能问题。 解决方法：使用事件委托。将事件监听器添加到按钮的父元素上，通过事件冒泡机制来处理子元素的点击事件。
document.getElementById('button-container').addEventListener('click', (event) => {
if (event.target.classList.contains('button')) {
const allButtons = document.querySelectorAll('.button');
allButtons.forEach(btn => btn.classList.remove('on_click'));
event.target.classList.add('on_click');
}
});通过这种方式，无论有多少按钮，都只需要一个事件监听器，从而提高性能。
相关·内容
btn-category-list-col-click {}
font-weight: bold;
} 循环按钮正如您所看到的，我的onclick函数更改了所有类(.toggleClass)，而不是所单击的按钮。由于循环的原因，所有按钮都是相同的，我如何使其仅针对我所单击<
浏览 18提问于2021-07-27得票数 0
1回答
我有一个选项组，组内有切换按钮。如果单击切换按钮，代码就可以正常工作。但是，如果在切换按钮之外单击选项组，代码仍然会触发。例如，如果单击切换按钮之间的空格，On_click代码仍会触发。我想确定是否在选项组的On_click事件内单击了切换按钮。如何确定是否
浏览 1提问于2014-03-12得票数 0
我有一个使用鞋子的应用程序。在模型中，我有 query = get_queries run()然后这个get_queries会添加一些按钮到堆栈中，比如button "do 2" button "do 4"
如果用户单击该按钮，get
浏览 0提问于2014-10-13得票数 0
pack .n.a -side left.n add .n.a -text Abind .n <Button-1> {on_click}
set a [.n select] if {$a eq ".n.b"} { }
}但是，当我第一次单击制表符B时，我仍然得到输出".n.a“。或者，如果我更改为<em
浏览 0提问于2018-01-26得票数 0
回答已采纳
我一直在寻找关于这个问题的答案，但我没有找到我需要的正确答案。我正在使用带bootstrap的模式对话框，我希望在单击事件时更改模式的内容。这是我的模式对话框代码
<div class="modal fade" id="myModal{{ $user->id }}" tabindex="-1" class="closemodal" roleinformation
浏览 0提问于2016-10-27得票数 1
2回答
(变量在开头)我想把鼠标左键按下。如果我只是放了一个键，它会给我一个错误，所以我在任何地方都找不到它。elif key == exitKey: print("[Exit]")mouseLis.start() if button == mouse.Button.left:
浏览 18提问于2020-12-10得票数 0
2回答
当我点击一个条目的内部时，我试图改变鼠标指针的位置。我在入口时使用了icursor方法，但不起作用。from tkinter import ttk
event.widget.icursor(0) # thisthe first place
e.pack()
e.insert(0,
浏览 4提问于2018-05-29得票数 0
回答已采纳
我有一个菜单，我想在单击按钮时显示/切换该菜单，并在单击该按钮之外的文档的某些部分时隐藏该菜单。，由于某种原因，当文档中除按钮之外的部分被单击时，菜单将切换，而当按钮被单击时，菜单不会执行任何操作。它看起来像是当我取消顶部的注释( dropdown-toggle类的单击</e
浏览 1提问于2017-05-22得票数 0
3回答
设置单选按钮引导
、、
我试图用Jquery设置一个引导单选按钮： $("input[value='female']").prop('checked', true);}, 1000);
不幸的是，它似乎只有当我删除数据切换=“按钮”时才起作用。它适用于第二行单选按钮，但不适用于第一行。你知道我怎样才能让它在第一排工作吗？
浏览 5提问于2015-06-25得票数 0
回答已采纳
1回答
使用外部控件显示下拉菜单
、、、、
当按下启动按钮时，如何使引导带下拉显示？我的html是： <button id="activeBranchFilterBtn" type="button" class> </div>
为了澄清，我希望列表显示是否按下了“分支”按钮，就像我单击普通<e
浏览 4提问于2014-06-19得票数 0
1回答
我一直在尝试在c++中为我的新游戏创建按钮，我已经为它们创建了一个保存数据的类。我需要能够分配一个方法给每个按钮点击类。例如，假设我有十个按钮，我需要每个按钮在单击时输出一个不同的单词。class button{
void on_click(
浏览 2提问于2019-02-16得票数 0
1回答
我试图在单击按钮时将用户重定向到不同的页面，并停止任何与asp相关的事件，如果它在javascript中遇到if()语句中的验证，我这样做的原因是因为在特定的页面上。由于某种原因，它没有抓取On_Click事件。在调试时..在进入.cs文件中的On_Click事件之前，它会调用多个类和函数。当
浏览 3提问于2011-10-18得票数 0
回答已采纳
3回答
我正在使用Python模块Pynput制作一个宏，它将按下我的一个侧边按钮。有人知道侧边按钮在Pynput中叫什么吗？
浏览 1提问于2018-09-30得票数 2
我得到了一个带有某个类的div，我委托了一个click事件给它，所以当它被单击时，我切换它的类与另一个类，并打开一个对话框，现在当对话框关闭时，我将div类切换回原来的类。复制说明:在<
浏览 7提问于2012-02-20得票数 3
回答已采纳
我有一个侧边导航，在小型设备上可以很好地从左侧切换。一切都很完美，除了当你点击侧边栏中的一个链接时；我不想用导航栏来隐藏和显示内容div，但是它被卡住了，你必须点击切换按钮来删除侧边栏。我应该怎么做才能让导航栏在不使用折叠的情况下在单击时消失？按钮
<button type="button" id="sideBtn" class="navbar-toggle l
浏览 1提问于2018-05-03得票数 0
1回答
我正在为一个网站自动化一些东西，在某些时候，用户必须手动填写验证码。如何等待用户正确完成验证码才能继续？
浏览 3提问于2020-12-25得票数 0
2回答
我正在编写，如何通过单击按钮浏览列表？lst =['a','b','c']for i in lst: st.write(i)
如何在列表中迭代以在按钮单击时打印列表的每个元素上面的代码只是一次给出所有的元素，但是我想要的是:我按下按钮，它应该打印&#x
浏览 9提问于2022-04-19得票数 0
回答已采纳
1回答
请查看我的..。当通知栏关闭时，应该有一个箭头向下放置，通过单击重新启动它。不确定如何在作者显示时使其自动下拉 $(document).ready(function () {
$('.notification.ondemandattr('id') + '').notify({ type: $(
浏览 1提问于2013-09-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
实时音视频活动推荐
腾讯云开发者
