javascript - 如何在循环中使用 $.data 来正确显示每个 div

Question

当我单击 map 上的标记时，我想显示与该标记关联的数据库中的数据。目前我正在为我创建的 div 执行此操作。当我单击 div 打开其下的表单时遇到问题，我想将相同的数据加载到表单中，但目前加载到每个 for 中的唯一数据是第一个通过循环运行的数据。

换句话说，我的 field 列表 div 可能会为这个位置保存 3 个 field ，我可以单击每个 div 并在其下显示一个表单，但如果“Sally's Salon”是列表中的第一个 div，则每个表单将显示“莎莉的沙龙”而不是他们自己的名字。这是我的代码:

 // initially detach form to be attached to each div on click
 var editForm = $('.edit-container').detach();

 function fillForm(title, priority) {
   $('.venue-input').val(title);
   $('.priority-input').val(priority);
 }

for(var i = array.length -1; i>=0; i--) {
  var prop = array[i].feature.prop

  if(prop.title) {

    // create variable to hold html
    var html = $([
      "<div class='venue-item'>",
        "  <span><strong>Venue Name</strong></span>",
        "  <span class='venue-name venue-title' data-title=" + prop.title + ">" + prop.title + "</span>",
        "<span class='venue-priority' data-priority=" + prop.prioritylevel + "><strong>Priority</strong>" + ' ' + prop.prioritylevel + "</span></div>"].join("\n"));

     // append venue item to venue list div with event handler to add form and prefill when clicked
     $(html).appendTo('.venue-list').on('click', function() {
       $(this).after(editForm);
       fillForm($('.venue-title').data('title'), $('.venue-priority').data('priority'));
     });
  }

任何输入都会有帮助，我已经为此奋斗了几天，不确定我是否正确附加了 html 元素，但我主要只是希望能够单击我创建的 html 元素之一然后数据被加载到表单中，以便可以对其进行操作。

Answer 1

您要附加内容的多个副本，但是有 2 个元素使用相同的 id(venue-priority 和 venue-title ) - 在网页上应该是唯一的。

此后，您使用 jQuery 来获取这些元素，但是由于 jQuery 期望 id 是唯一的，因此它只会获取具有该 Id 的第一个(或最后一个，我不确定)元素。

解决方案是不要在标记中使用重复的 ID。