Как сделать jQuery целевым и подключить вызов плагина к сотням идентификаторов CSS с идентификатором в конце?

Question

Я использую одну из моих любимых библиотек JavaScript для редактирования на месте вызова X-Editable
https://github.com/vitalets/x-editable

Я создаю приложение для управления проектами. На странице проекта есть несколько списков задач, и каждый список также может иметь несколько задач.

В одном проекте может быть 100 или более задач. Когда пользователь нажимает на заголовок задачи, я запускаю всплывающее модальное окно на странице, которое показывает все детали задачи для выбранных задач. Вещи как:

• Название задачи
• Описание задания
• Дата создания задачи
• Дата изменения задачи
• Срок выполнения задания
• веха
• Состояние задачи
• Приоритет задачи
• Комментарии к заданию (для задачи также может быть показано любое количество комментариев)

Для каждого из этих элементов сведений о задачах многие из них будут иметь возможность редактирования на месте с использованием библиотеки X-Editable JavaScript.

В настоящее время у меня есть быстрый макет, показывающий, как я могу использовать библиотеку для редактирования некоторых полей здесь [Макет удален, так как он был обновлен много раз и изменен с момента публикации этого вопроса]

$(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-коде я могу установить идентификатор с идентификационным номером для каждой записи задачи. Затем селектору jQuery нужно каким-то образом использовать какой-нибудь метод подстановки, чтобы найти все эти идентификаторы.... есть идеи?

Answer 1

Есть несколько способов

Одним из них является использование атрибута, начинающегося с селектора - было бы лучше, если бы вы могли улучшить его с помощью селектора элемента, такого как $('div[id^="task-title-modal-"]') если все элементы div

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

Другой - использовать класс, как редактируемый, для всех этих элементов, а затем использовать селектор класса.

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