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

Question

我觉得有一个 super 简单的答案，但我正在努力解决它。我使用下划线和 _.each 来渲染 html block (.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 与其相应的模态绑定(bind)(不确定这是否是正确的术语)？

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

**已更新** 莱特你摇滚!我的解决方案基于您的:

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

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

Answer 1

文档准备好时类似这样

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

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