0

我觉得有一个超级简单的答案，但我正在努力解决它。我使用下划线和 _.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 进行硬编码，因为 .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);
 });

这会为每个数据块和模态添加一个称为标识符的 attr。现在我不知道如何调用正确的模态。所以点击带有标识符=“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>
4

3 回答 3

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(); 
});
于 2013-06-20T15:01:20.523 回答
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();
});

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

于 2013-06-20T16:38:00.617 回答
0

弄清楚了！谢谢sroes和莱特！！

 $(".datachunk").click(function (){                         
 $("#" +$(this).attr("identifier")).modal();
 });
于 2013-06-20T19:49:12.713 回答