Question

我有这个循环..

while($list = $cars->fetch(PDO::FETCH_ASSOC)) {
<div class="car-box modalButton" id="tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview">

<div class="modal fade" id="preview" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                 <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel"><?php echo $list['title']; ?></h4>
                   </div>
                 <div class="modal-body">
                      <iframe style="display:block;" frameborder="0"></iframe>
                 </div>
                 <div class="modal-footer">

                         </div>
                </div><!-- /.modal-content -->
             </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
}

所以当我点击列表的第一辆车时，我的模态弹出窗口会打开并显示标题正常。当我点击第二辆车并打开模态弹出窗口时，它再次向我显示第一辆车的标题，而不是我点击的第二辆车。我尝试使用jquery在#tbinfo上点击标题，但没有成功：

$('#tbinfo').on('click',function(){
var title = $(this).attr('data-title');
$('.modal-title').html(title);
});

我该怎么做才能解决这个问题？任何想法？

Answer 1

在我的项目中，我使用data-属性。

实施例。看，我如何将code传递给模态。

链接：

<a href="#modal-info" class="text-muted" data-toggle="modal" data-code="{{ code }}">

模态：

<div class="modal fade" id="modal-info">
    <dd name="code"></dd>
</div>

事件监听器：

$('#modal-info').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var code   = button.data('code');
    var modal  = $(this);

    modal.find('[name="code"]').text(code);
}

Answer 2

您好，请更新您的代码，如：

 <?php 
$i=1;
        while($list = $cars->fetch(PDO::FETCH_ASSOC)) {?>
        <div class="car-box modalButton tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview_<?php echo $i; ?>">

        <div class="modal fade" id="preview_<?php echo $i; ?>" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                         <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel"><?php echo $list['title']; ?></h4>
                           </div>
                         <div class="modal-body">
                              <iframe style="display:block;" frameborder="0"></iframe>
                         </div>
                         <div class="modal-footer">

                                 </div>
                        </div><!-- /.modal-content -->
                     </div><!-- /.modal-dialog -->
                  </div><!-- /.modal -->
    <?php $i++;    }?>

指定每个模态唯一ID

Answer 3

您只需增加html id属性，因为它目前始终会引用创建的第一个模态。 All id's must be unique in html.

我只需添加一个简单的计数器并将其附加到您的ID。因此，在此示例$i中创建一个新变量，并为其赋值0。在循环中，在循环的开头或结尾递增值。然后将$i的值附加到您的模态id属性和modalButton的{{1}}属性。因此data-target在所有情况下都会变成preview。

在这里，像这样：

preview-<?=$i;?>

确保您的PHP安装支持简写回显<?php $i = 0; while($list = $cars->fetch(PDO::FETCH_ASSOC)) { ++$i; ?> <div class="car-box modalButton" id="tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview-<?=$i;?>"> <div class="modal fade" id="preview-<?=$i;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> ... modal markup ...，如果这不起作用，那么您可以正常回显该变量，就像您在其中<?=$VAR;?>所做的那样。

这将确保每次单击按钮时，它会打开一个新的，唯一的模态而不是第一个。

Answer 4

请勿使用<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <title></title> <script> $(document).ready(function () { //$("#TextBox1").val('00.0000'); debugger; document.getElementById('TextBox1').value = "00.0000"; }); function CallMe() { debugger; if (document.getElementById('CheckBox1').checked) { $find("MaskedEditExtender1").set_Mask("99.99"); document.getElementById('TextBox1').value = "00.00"; } else { $find("MaskedEditExtender1").set_Mask("99.9999"); document.getElementById('TextBox1').value = "00.0000" } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ScriptManager1" runat="server" /> <%--<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>--%> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:CheckBox ID="CheckBox1" runat="server" onchange="javascript:CallMe()" /> <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox1" BehaviorID="MaskedEditExtender1" Mask="99.9999" MessageValidatorTip="true" MaskType="Number" InputDirection="LeftToRight" AcceptNegative="None" ErrorTooltipEnabled="True" > </asp:MaskedEditExtender> </div> </form> </body> </html>。使用id。

class name

将此代码放在页脚或同一页中。

<?php 
while($list = $cars->fetch(PDO::FETCH_ASSOC)) {?>

    <div class="car-box modalButton" id="tbinfo" data-title="<?php echo $list['title'] ?>" data-toggle="modal" data-src="http://url.com/car.php?q=<?php echo $list['rand_num']; ?>" data-height="<?php echo $height; ?>" data-width="<?php echo $size[0]; ?>" data-target="#preview"></div>

}?>

<强> JS

<div class="modal fade" id="preview" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
       <div class="modal-content">

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

创建页面名称 ajax_modalTitle.php （如果您要更改此页面名称。请更改<script> $('.modalButton').click(function(){ var title = $(this).attr('data-title'); $.ajax({url:"ajax_modalTitle.php?title="+title,cache:false,success:function(result){ $(".modal-content").html(result); }}); }); </script>标记。两者都相关。）

<script></script>

在模态引导程序中传递php变量

4 个答案: