在带有按钮的循环中:仅在单击的按钮中切换类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');
    }
});

通过这种方式，无论有多少按钮，都只需要一个事件监听器，从而提高性能。