JQuery |for循环创建唯一元素类

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。for 循环是一种控制结构，用于重复执行一段代码固定的次数。

类型

在 jQuery 中，for 循环通常用于动态创建元素并添加到 DOM 中。例如，创建具有唯一类名的元素。

应用场景

假设你需要在一个页面上动态创建多个具有唯一类名的按钮，每个按钮点击后显示其索引。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery For Loop Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="button-container"></div>

    <script>
        $(document).ready(function() {
            var container = $('#button-container');

            for (var i = 0; i < 5; i++) {
                var button = $('<button>').text('Button ' + (i + 1));
                button.addClass('button-' + i);
                button.click(function() {
                    alert('You clicked button ' + (i + 1));
                });
                container.append(button);
            }
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：点击按钮时，所有按钮显示相同的索引

原因：JavaScript 的闭包机制导致 i 在循环结束后取值为 5，因此所有按钮点击时显示的索引都是 5。

解决方法：使用立即执行函数表达式（IIFE）来捕获每次循环的 i 值。

for (var i = 0; i < 5; i++) {
    (function(index) {
        var button = $('<button>').text('Button ' + (index + 1));
        button.addClass('button-' + index);
        button.click(function() {
            alert('You clicked button ' + (index + 1));
        });
        container.append(button);
    })(i);
}