Javascript 动态选择要打开的模式

我觉得有一个超级简单的答案，但我正在努力。我使用下划线和35;每个来呈现一块html（.datachunk和#mymodal），并在对象数组上迭代以填充数据。这是我精简的HTML

<!--BEGIN datachunk-->
<div class="datachunk"></div> 
<!-- END datachunk-->

<!--BEGIN datachunk-->
<div class="datachunk"></div> 
<!-- END datachunk-->

<!--BEGIN datachunk-->
<div class="datachunk"></div> 
<!-- END datachunk-->


  <!--BEGIN Modal-->           
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
  <!--END Modal-->

  <!--BEGIN Modal-->           
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
  <!--END Modal-->

   <!--BEGIN Modal-->          
   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
   <!--END Modal-->

但无论我点击什么，这只会弹出第一个模式

如何将每个.datachunk与其对应的模式绑定（不确定这是否是正确的术语）

我无法硬编码特定的类或id，因为.datachunk和modals的数量是动态的，取决于拉入的帖子数量

**已更新** 雷特，你太棒了！我的解决方案基于您的：

$(".datachunk").each(function(index){
var datachunkIdentifier = "postInfo" + index;
 $(this).data("datachunk-class", datachunkIdentifier);
 $(".datachunk").eq(index).attr("identifier", datachunkIdentifier);
});

$(".datachunk").each(function(index){
 var datachunkIdentifier = "postInfo" + index;
  $(this).data("modal-id", datachunkIdentifier);
  $(".modal").eq(index).attr("identifier", datachunkIdentifier);
 });

这将为每个数据块和模式添加一个名为identifier的attr。现在我不知道如何调用正确的模态。因此，单击带有identifier=“postInfo1”的div.datachunk会弹出带有identifier=“postInfo1”的myModal

新html：

<div class="datachunk borderBottom" identifier="postInfo1"></div> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" identifier="postInfo1"></div>

---

您可能希望执行以下操作：

<!--BEGIN datachunk-->
<div class="datachunk" data-modal-id="myModal1"></div> 
<!-- END datachunk-->

<!--BEGIN datachunk-->
<div class="datachunk" data-modal-id="myModal2"></div> 
<!-- END datachunk-->

<!--BEGIN datachunk-->
<div class="datachunk" data-modal-id="myModal3"></div> 
<!-- END datachunk-->


  <!--BEGIN Modal-->           
  <div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
  <!--END Modal-->

  <!--BEGIN Modal-->           
  <div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
  <!--END Modal-->

   <!--BEGIN Modal-->          
   <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
   <!--END Modal-->

---

文档准备好了吗

$(".datachunk").each(function(index){
    var modalId = "modal" + index;
    $(this).data("modal-id", modalId);
    $(".modal").eq(index).attr("id", modalId);
});

动态添加数字，然后只需按照sroes答案显示模式

编辑

我不会使用属性来放置标识符

根据上面的代码，将模态的标识符放在ID中，sroes给出的代码应该可以工作。此外，这比像现在这样在DOM中重复id要好（id=“myModal”）

---

如果您使用上面的代码，这应该足以让它工作。

解决了它！谢谢sroes和Leite

 $(".datachunk").click(function (){                         
 $("#" +$(this).attr("identifier")).modal();
 });

---

不能有多个元素具有相同的id。好的一点，我如何使用jquery或js增加id和类名？在页面上放置它们时，在某处放置计数器是一个合理的想法。我不想硬编码任何类或id，因为一切都是动态的。如何使用JS或jquery将递增的数字添加到每个类的末尾？如何修改代码以使用名为identifier的自定义属性？请查看我问题中的更新。谢谢！请看我更新的问题。我找不到合适的模式。

$(".datachunk").each(function(index){
    var modalId = "modal" + index;
    $(this).data("modal-id", modalId);
    $(".modal").eq(index).attr("id", modalId);
});

$(".datachunk").on("click", function(){
    var modalId = $(this).data("modal-id");
    $("#" + modalId).modal();
});

 $(".datachunk").click(function (){                         
 $("#" +$(this).attr("identifier")).modal();
 });