通PHP變量模式引導

Question

我有這個while循環..

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的data-target屬性中。因此preview在所有情況下都變成preview-<?=$i;?>。

這裏，像這樣：

<?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 ... 

確保你的PHP安裝支持速記回聲<?=$VAR;?>，如果沒有工作，然後你可以回聲變量out爲正常，像你這樣做其他地方<?php echo ... ?>。

這將確保每次單擊該按鈕時，它都會打開一個新的，唯一的模式，而不僅僅是第一個模式。

Answer 4

請勿使用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> 

}?> 

將此代碼放在頁腳或同一頁在下降。

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

JS

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

創建一個頁面名稱ajax_modalTitle.php（如果您想改變這個頁面的名稱。在<script></script>標籤更改過。兩者都相關。）

<?php 
$title = $_GET['title']; 
?> 

<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 $title;?></h4> 
</div> 
<div class="modal-body"> 
    <iframe style="display:block;" frameborder="0"></iframe> 
</div> 
<div class="modal-footer"> 

</div>