本文介绍了如何使用 jQuery 动态地为按钮点击事件创建和赋值变量。通过使用事件委托和数组存储状态，避免了冗余的代码，并提供了一个简洁高效的解决方案。
在 Web 开发中，经常会遇到需要根据用户交互动态地创建和管理变量的情况。例如，当用户点击一系列按钮时，我们可能需要为每个按钮维护一个状态变量。如果按钮数量很多，手动编写大量的事件处理函数将会非常繁琐且难以维护。本文将介绍一种使用 jQuery 和事件委托来动态创建变量并响应点击事件的方法，从而简化代码并提高效率。
解决方案
该解决方案的核心在于使用事件委托和数组来管理按钮的状态，避免了为每个按钮单独创建变量和事件处理函数。
1. HTML 结构
首先，需要一个包含所有按钮的容器。假设这个容器的 ID 是 dots，每个按钮都有一个类名 dot。
<div id="dots"> </div>
2. CSS 样式
为了使按钮更具视觉效果，可以添加一些 CSS 样式。
#dots {
display: flex;
gap: 10px;
flex-direction: row;
flex-wrap: wrap;
width: 130px;
border: 1px solid black;
padding: 10px;
}
.dot {
font-size: 35px;
}
.dot:hover {
color: red;
}
.dot::before {
content: "•"
}
.dotClicked {
color: red;
}3. JavaScript 代码
接下来，使用 jQuery 来实现动态变量创建和事件处理。
// test data
$('#dots').html(Array.from({ length: 36 })
.map((_, i) => `<div class="dot"></div>`).join('') // vanilla JS map
);
let dotsClicked = $('.dot').map(function() {
return this.matches('.dotClicked')
}).get(); // jQuery map using vanilla JS matches
$('.dot').on('click', function() {
$(this).toggleClass('dotClicked');
dotsClicked[$(this).index()] = $(this).is('.dotClicked');
console.log(dotsClicked);
})代码解释：
-
$('#dots').html(Array.from({ length: 36 }).map((_, i) => '').join('')): 这段代码使用 JavaScript 的 Array.from 方法创建了一个包含 36 个元素的数组，然后使用 map 方法将每个元素转换为一个带有类名 dot 的 元素，最后使用 join 方法将所有元素连接成一个字符串，并将其设置为 ID 为 dots 的元素的 HTML 内容。
- let dotsClicked = $('.dot').map(function() { return this.matches('.dotClicked') }).get();: 这段代码使用 jQuery 的 map 方法遍历所有带有类名 dot 的元素，并使用 JavaScript 的 matches 方法检查每个元素是否具有类名 dotClicked。然后，使用 get 方法将结果转换为一个数组，并将其赋值给变量 dotsClicked。该数组用于存储每个按钮的点击状态。
- $('.dot').on('click', function() { ... }): 这行代码使用 jQuery 的 on 方法为所有类名为 dot 的元素绑定一个点击事件处理函数。
- $(this).toggleClass('dotClicked'): $(this) 指的是当前被点击的元素， toggleClass('dotClicked') 方法用于切换该元素的 dotClicked 类名。如果元素已经有这个类名，则移除它；如果没有，则添加它。
- dotsClicked[$(this).index()] = $(this).is('.dotClicked'): $(this).index() 获取当前被点击元素在其父元素中的索引，然后将 dotsClicked 数组中对应索引的值更新为当前元素是否具有 dotClicked 类名。$(this).is('.dotClicked') 返回一个布尔值，表示当前元素是否具有 dotClicked 类名。
- console.log(dotsClicked): 将 dotsClicked 数组的内容输出到控制台，以便查看每个按钮的点击状态。
4. 引入 jQuery
确保在 HTML 文件中引入 jQuery 库。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
总结
通过使用事件委托和数组，可以有效地管理大量按钮的状态，避免冗余的代码。这种方法不仅简化了代码，还提高了代码的可维护性和可扩展性。在实际开发中，可以根据具体需求进行适当的修改和扩展。
