如何制作 jQuery 目标并将插件调用附加到数百个 CSS ID 的末尾带有 ID 号？

Question

我正在使用我最喜欢的 JavaScript 库之一进行 in-place 编辑调用 X-Editable
https://github.com/vitalets/x-editable

我正在构建项目管理应用程序。在一个项目页面上有多个任务列表，每个列表也可以有多个任务。

一个项目很容易包含 100 个或更多任务。当用户单击任务的标题时，我会在页面上启动一个弹出窗口模式 window，显示所单击任务的所有任务详细信息。像这样的东西：

任务标题
任务描述
任务创建日期
任务修改日期
任务截止日期
里程碑
任务状态
任务优先级
任务评论（也可以为任务显示任意数量的评论）

对于这些任务详细信息项中的每一个，其中许多项将具有使用 X-Editable JavaScript 库的 in-place 编辑功能。

目前，我有一个快速模型，展示了我如何使用该库来编辑此处的一些字段[模型已删除，因为它已经更新了很多次，并且自 POST 这个问题的日期以来已经更改]

$(document).ready(function() {

  //toggle `popup` / `inline` mode
  $.fn.editable.defaults.mode = 'inline';

  $('#task-title-modal').editable({
      type: 'text', // text|textarea|select|date|checklist
      url: '/updatetask',    
      pk: 1,
      toggle: 'click', // click|dblclick|mouseenter|manual
      highlight: '#FFFF80',
      mode: 'inline', // inline | popup
      placement: 'top',
      title: 'Enter Task Title',
      tpl: '<input type="text" style="width: 253px; padding-right: 24px;">',
      validate: function(value) {
          if($.trim(value) == '') {
              return 'This field is required';
          }
      },
      params: function(params) {
          //Addition params in addition to the default: pk, name, value
          params.userId = 1;
          params.projectId = 1;
          params.taskId = 1;
          return params;
      },
      success: function(response, newValue) {
          if(!response.success) return response.msg;
      }
  });



  //ajax emulation. Type "err" to see error message
  $.mockjax({
      url: '/updatetask',
      responseTime: 900, // simulate lag
      response: function(settings) {
          console.log(settings.data);
          if(settings.data.value == 'err') {
             this.status = 500;  
             this.responseText = 'Validation error!';
          } else {
             this.responseText = '';  
          }
      }
  }); 

});

这个演示页面很好用...有 1 个例外...这是针对 1 个任务记录的！

我需要弄清楚如何让它适用于页面上的 X 条任务记录。

如果一个项目有 100 个任务记录，那么我的 JavaScript 需要将 X-Editable 代码分配给每个任务记录和每个任务记录中的每个归档！

我的问题是如何让这个库对单个页面上任意数量的记录进行内联编辑？

现在对于每个任务中的每个字段，我必须做这样的事情...

$('#task-title-modal').editable({})

所以我可能需要做这样的事情...

$('#task-title-modal-ID_NUMBER_HERE').editable({})

然后在我的HTML中我可以为每个任务记录设置一个带有ID号的ID。 jQuery 选择器然后需要以某种方式使用某种通配符方法来查找所有这些 ID……有什么想法吗？

Answer 1

有多种方式

一种是使用 attribute starts with selector - 如果所有元素都是 div

，如果你能用像 $('div[id^="task-title-modal-"]') 这样的元素选择器来增强它会更好

$('[id^="task-title-modal-"]').editable({})

另一种方法是使用 class 对所有这些元素进行编辑，然后使用 class 选择器

$('.editable').editable({})

如何制作 jQuery 目标并将插件调用附加到数百个 CSS ID 的末尾带有 ID 号？

How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

javascript

jquery

css

x-editable

edit-in-place