Question

我觉得有一个非常简单的答案，但我正在努力解决它。我使用下划线和_.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。 ETC ...

现在我有：

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

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

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

我无法硬编码特定的类或ID，因为.datachunks和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);
 });

这为每个datachunk和modal添加了一个名为identifier的attr。现在我无法弄清楚如何调用正确的模态。所以点击带有标识符=“postInfo1”的div.datachunk会弹出带有标识符=“postInfo1”的#myModal

new 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

您可能想要这样做：

<!--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-->

然后JS：

$(".datachunk").click(function (){ 
 $("#" + $(this).attr('data-modal-id')).modal(); 
});

Answer 2

文档准备好了这样的事情

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

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

Answer 3

想出来！谢谢sroes和Leite !!

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

动态选择要打开的模态

3 个答案: