javascript - 动态选择要打开的模态

我觉得这里有一个超级简单的答案，但我一直在努力。我正在使用下划线和_.each渲染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，然后弹出以打开第一个#mymodal。单击第二个.datachunk，然后弹出以打开第二个#mymodal。单击第三个.datachunk并弹出打开第三个#mymodal。等等...

现在我有：

$(".datachunk").click(function (){
 $("#myModal").modal();
});

但这只会弹出第一个模态，无论我单击什么.datachunk（如预期的那样）。

如何将每个.datachunk与相应的模式绑定（不确定，是否正确）？

我无法对特定的类或ID进行硬编码，因为.datachunks和模式的数量是动态的，具体取决于要插入的帖子数。

**更新**
让你摇滚！我基于您的解决方案：

$(".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);
 });

这为每个数据块和模态添加了一个称为标识符的属性。现在我不知道如何调用正确的模态。因此，单击带有标识符=“ postInfo1”的div.datachunk会弹出带有标识符=“ 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>

最佳答案

像这样的文件准备好了

$(".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”）更好。

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

如果您使用上面的代码，这应该足以使其正常工作。