动态选择要打开的模态

Dynamically selecting modal to open

本文关键字：模态 选择 动态      更新时间：2023-09-26

我觉得有一个超级简单的答案，但我正在努力。我用下划线和_。每个渲染一个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);
 });

这将为每个数据块和模式添加一个名为标识符的属性。现在我不知道如何调用正确的模态。所以点击div.datachunk with identifier="postInfo1"会弹出#myModal with identifier="postInfo1"

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

像这样在document ready

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

动态添加数字，然后只跟随答案显示模态。

编辑

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

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

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

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

您可能想要这样做:

<!--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(); 
});

明白了!谢谢sroes和Leite!!

 $(".datachunk").click(function (){                         
 $("#" +$(this).attr("identifier")).modal();
 });
相关文章：