时间戳

首页 > 解决方案 > 使用可变元素 ID 时，jQuery 如何区分函数调用（例如点击时）？

javascript - 使用可变元素 ID 时，jQuery 如何区分函数调用（例如点击时）？

问题描述

使用可变元素 ID 时，jQuery 如何区分函数调用（例如点击时）？

我有许多文件包含在一个表中，每一行都包含一个复选框和文件名。

这些复选框输入元素中的每一个都有一个唯一生成的 ID，即“Item_”后跟一个 5 个唯一数字编号。

理想情况下，我想在用户选择或取消选择复选框时处理复选框的状态。如果我在用户单击列表中的项目时使用以下内容进行访问，jQuery 将如何响应复选框设置/取消设置？

$("#Item_" + file_number).some_function_here();

jQuery 会跟踪页面上 ID 为 Item_#### 的元素（例如 Item_100、Item_1234 等）吗？这些项目不会是动态的，因此页面将仅包含页面加载时该页面的一部分的元素，因此 jQuery 处理所需的所有信息在页面首次加载时都可用。但是我想避免为列表中的每个元素生成一个处理函数，以最小化页面的大小并保持代码干净，以便 javascript/jquery 在页面之间是相同的，并且只会更改文件项。

感谢您提供任何帮助。

标签： javascriptjquery

解决方案

使用可变元素 ID 时，jQuery 如何区分函数调用（例如点击时）？

它们存储在 jQuery 内部的闭包中。它与以下内容并没有太大不同：

const getElements = (selector) => {
  const elements = document.querySelectorAll(elements);
  return {
    someFn() {
      // do something with every element in `elements`
    }
  };
};

对于你正在做的事情，听起来你应该给每个项目一个类名而不是一个单独的 ID，然后为该类的所有元素添加一个更改侦听器。然后，this监听器内部将引用被更改的元素：

$('.item').on('change', function() {
  console.log(this); // refers to the input
  console.log('was just changed to', this.checked);
});

然后您可以根据元素和复选框状态适当地处理更改。

推荐阅读