javascript - 具有多个实例的 jQuery 插件，使事件作用于当前项目

Question

我正在构建一个 JavaScript/jQuery 插件，它将采用 JSON 对象数组并生成弹出列表项选择器/选择器。单击页面上的项目/输入，将打开如下图所示的弹出窗口，其中包含 JSON 列表数据。

主要特点:

• 搜索过滤器
• 分页和每页项目选项
• 用于将列表项组织到弹出窗口上不同屏幕的类别和选项卡面板/DIV
• 单击某个项目会通过触发自定义 DOM 事件来选择该项目，您可以插入该事件以将所选值保存到数据库或对其执行任何您想要的操作。
• 从 JSON 对象数组创建列表项
• 可以从相同的 JSON 数据中提取类别，并为每个类别构建单独的列表对象

JSON 数据格式

现在，对象的 JSON 数组如下所示:

  var mock_data_types = [{
    "type": "first_name",
    "name": "First Name1",
    "description": "Random generated First Name",
    "example": "Jason",
    "category": "person"
  }, {
    "type": "address",
    "name": "address2",
    "description": "Random generated Last Name",
    "example": "Davis",
    "category": "address"
  }, {
    "type": "domain",
    "name": "Domain Name3",
    "description": "Random generated WWW Domain Name",
    "example": "google.com",
    "category": "it"
  }];

<小时/>

当前问题

1)
当页面上有多个弹出框选择器时，当您选择一项时，它会更新具有弹出框的所有输入字段的选定值，而不仅仅是当前打开的输入字段。

我相信代码可能需要跟踪多个实例

我尝试过这样做，但一直失败。有人可以帮忙解决这个问题吗？

<小时/>

2)
完整的代码库很糟糕，可以改进，因为我是一名 PHP 开发人员，并且还在学习 JS!

<小时/>

演示 JSFiddle

https://jsfiddle.net/jasondavis/9fpc3LLo/

Answer 1

你的插件做得很好。

所以，也许您可​​以将它用作 jQuery-UI(插件)小部件。您可以获取文档 here使用 jQuery-UI widgetFactory。我认为这可以帮助您解决第一个问题，并为您提供一些改进第二个问题的技巧...

希望能帮到你。

问候!