使用 jQuery 动态创建变量并响应点击事件

本文介绍了如何使用 jQuery 动态地为按钮点击事件创建和赋值变量。通过使用事件委托和数组存储状态，避免了冗余的代码，并提供了一个简洁高效的解决方案。

在 Web 开发中，经常会遇到需要根据用户交互动态地创建和管理变量的情况。例如，当用户点击一系列按钮时，我们可能需要为每个按钮维护一个状态变量。如果按钮数量很多，手动编写大量的事件处理函数将会非常繁琐且难以维护。本文将介绍一种使用 jQuery 和事件委托来动态创建变量并响应点击事件的方法，从而简化代码并提高效率。

解决方案

该解决方案的核心在于使用事件委托和数组来管理按钮的状态，避免了为每个按钮单独创建变量和事件处理函数。

1. HTML 结构

首先，需要一个包含所有按钮的容器。假设这个容器的 ID 是 dots，每个按钮都有一个类名 dot。

<div id="dots">
  </div>

2. CSS 样式

为了使按钮更具视觉效果，可以添加一些 CSS 样式。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

#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) => '<div class="dot"></div>').join('')): 这段代码使用 JavaScript 的 Array.from 方法创建了一个包含 36 个元素的数组，然后使用 map 方法将每个元素转换为一个带有类名 dot 的 <div> 元素，最后使用 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>

总结

通过使用事件委托和数组，可以有效地管理大量按钮的状态，避免冗余的代码。这种方法不仅简化了代码，还提高了代码的可维护性和可扩展性。在实际开发中，可以根据具体需求进行适当的修改和扩展。

以上就是使用 jQuery 动态创建变量并响应点击事件的详细内容，更多请关注php中文网其它相关文章！