從一個循環獲取數據，並在腳本中使用它

Question

$('.btn[data-toggle=modal]').on('click', function(){ 
 
    var $btn = $(this); 
 
    var currentDialog = $btn.closest('.modal-dialog'), 
 
    targetDialog = $($btn.attr('data-target'));; 
 
    if (!currentDialog.length) 
 
    return; 
 
    targetDialog.data('previous-dialog', currentDialog); 
 
    currentDialog.addClass('aside'); 
 
    var stackedDialogCount = $('.modal.in .modal-dialog.aside').length; 
 
    if (stackedDialogCount <= 5){ 
 
    currentDialog.addClass('aside-' + stackedDialogCount); 
 
    } 
 
}); 
 

 
$(document).ready(function(){ 
 
    $('.modal').on('hide.bs.modal', function() { 
 
    $('.modal').removeClass('aside'); 
 
    }); 
 
});

.modal.in { 
 
    -webkit-perspective: 2000px; 
 
    -moz-perspective: 2000px; 
 
    -ms-perspective: 2000px; 
 
    -o-perspective: 2000px; 
 
    perspective: 2000px; 
 
} 
 
.modal.in .modal-dialog.aside { 
 
    -webkit-transform: -340px; 
 
    -moz-transform: -340px; 
 
    -ms-transform: -340px; 
 
    -o-transform: -340px; 
 
    transform: -340px; 
 
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    -o-transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    -webkit-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 
.modal.in .modal-dialog.aside.aside-1 { 
 
    -webkit-transform: calc(-300px); 
 
    -moz-transform: calc(-300px); 
 
    -ms-transform: calc(-300px); 
 
    -o-transform: calc(-300px); 
 
    transform: calc(-300px); 
 
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
} 
 
.modal.in .modal-dialog.aside.aside-2 { 
 
    -webkit-transform: calc(-260px); 
 
    -moz-transform: calc(-260px); 
 
    -ms-transform: calc(-260px); 
 
    -o-transform: calc(-260px); 
 
    transform: calc(-260px); 
 
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
}

<button type="button" data-toggle="modal" data-target="#test-modal"> 
 

 
<div class="modal fade" id="test-modal" data-modal-index="1"> 
 
          <div class="modal-dialog modal-lg"> 
 
          <div class="modal-content" style="background: #031035 url(images/logo.png) no-repeat center center fixed;"> 
 
           <div class="modal-header" style="background: rgba(0, 0, 0, 0.2);"> 
 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
           <h4 class="modal-title" style="text-align: center;"><strong>EVENT RETURNED:</strong></h4> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">Fecha:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
           </div> 
 
           <div class="row"> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">Agencia:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;">INOP</p> 
 
            </div> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">Tipo:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
           </div> 
 
           <div class="row"> 
 
            <div class="col-xs-12"> 
 
            <label style="font-size: 15px; color: green;">Ofensa:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"</p> 
 
            </div> 
 
           </div> 
 
           <div class="row"> 
 
            <div class="col-xs-12"> 
 
            <label style="font-size: 15px; color: green;">Lugar:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
           </div> 
 
           <div class="row"> 
 
            <div class="col-xs-4"> 
 
            <label style="font-size: 15px; color: green;">Sector:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
            <div class="col-xs-4"> 
 
            <label style="font-size: 15px; color: green;">Tipo:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
            <div class="col-xs-4"> 
 
            <label style="font-size: 15px; color: green;">ND:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
           </div> 
 
           <div class="row"> 
 
            <div class="col-xs-4" style="width: 18%;"> 
 
            <label style="font-size: 15px; color: green;">Descripci&oacute;n:</label> 
 
            </div> 
 
            <div class="col-xs-8"> 
 
            <p style="text-transform: uppercase; display: inline; font-size: 18px; color: #8a8a8a;"> 
 
             </p> 
 
            </div> 
 
           </div> 
 
           <br> 
 
           <div class="row"> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">RP:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">RPP:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
           </div> 
 
           <br> 
 
           <div class="row"> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">SPE:</label> 
 
            <p style="text-transform: uppercase; display: inline; padding-left: 18px; padding-right: 18px; font-size: 18px; color: #8a8a8a;"></p> 
 
            </div> 
 
            <div class="col-xs-6"> 
 
            <label style="font-size: 15px; color: green;">DISPO:</label><button type="button" class="btn btn-default" data-toggle="modal" data-target="#test-modal-2">Launch Modal 2</button></p>'; 
 
            </div> 
 
           </div> 
 
           <br> 
 
        <br> 
 
       <br> 
 
       <br> 
 
      <br> 
 
      <br></div> 
 
         <div class="modal-footer" style="background: rgba(0, 0, 0, 0.4);"> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
         </div> 
 
         </div> 
 
         </div> 
 
         </div> 
 
        
 
         <div class="modal fade" id="test-modal-2" data-modal-index="2"> 
 
        <div class="modal-dialog"> 
 
         <div class="modal-content"> 
 
         <div class="modal-header"> 
 
          <button type="button" class="close" data-dismiss="modal" ><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
          <h4 class="modal-title">Modal title 2</h4> 
 
         </div> 
 
         <div class="modal-body"> 
 
          <p>One fine body&hellip;</p> 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
         </div> 
 
         </div><!-- /.modal-content --> 
 
        </div><!-- /.modal-dialog --> 
 
        </div><!-- /.modal -->

$('.btn[data-toggle=modal]').on('click', function(){ 
 
    var $btn = $(this); 
 
    var currentDialog = $btn.closest('.modal-dialog'), 
 
    targetDialog = $($btn.attr('data-target'));; 
 
    if (!currentDialog.length) 
 
    return; 
 
    targetDialog.data('previous-dialog', currentDialog); 
 
    currentDialog.addClass('aside'); 
 
    var stackedDialogCount = $('.modal.in .modal-dialog.aside').length; 
 
    if (stackedDialogCount <= 5){ 
 
    currentDialog.addClass('aside-' + stackedDialogCount); 
 
    } 
 
}); 
 

 
$('.modal').on('hide.bs.modal', function(){ 
 
    var $dialog = $(this); 
 
    var previousDialog = $dialog.data('previous-dialog'); 
 
    if (previousDialog){ 
 
    previousDialog.removeClass('aside'); 
 
    $dialog.data('previous-dialog', undefined); 
 
    } 
 
}); 
 

 
$(document).ready(function(){ 
 
    var numero = "#test-modal<?php echo $array1; ?>"; 
 
    $(numero).on('hide.bs.modal', function() { 
 
     alert('The modal is about to be hidden.'); 
 
    }); 
 
});

<?php 
 
$i = 0; 
 
if($countdelitos != 0) { 
 
while($row = mysqli_fetch_array($querydelitos)){ 
 
$i++; 
 
$id_delito = $row['id']; 
 
$fecha_delito = $row['fecha']; 
 
?> 
 
<!-- Modal --> 
 
<?php echo' 
 
<div class="modal fade" id="test-modal'.$i.'" data-modal-index="1">'; //Here goes the rest of the modal 1 and 2 (test-modal$i and test-modal-2$i</div> ?>

我需要一點點幫助這裏。

所以我有$我定義爲0，並且該數字將在while循環中增加。我想要做的是在關閉模式後發送警報的js代碼中使用該$ i。所以我想我需要得到的數據以外的循環，並在腳本中使用它

編輯：在模態1內有一個按鈕來打開模態2（所以它是可堆疊的）後模態2打開模態1得到一個旋轉效果，停留在後面但旋轉，工作完美，但是當你關閉模態時，模態1保持旋轉狀態，它不會再次旋轉到正常位置，這是因爲'$ i'變量。因此，爲了發現這個問題，我提出了一個警告，然後我發現這是不工作的，因爲'$ i'變量不知道在哪裏使用removeClass函數。

希望你能更好地理解。

對不起，我的英語不好，如果你不明白有些事情說出來，我會再回復你

Answer 1

在你原來的職位，我建議結合的處理程序全部div.modal元素，而不是每個具體ID。就像這樣：

$('.modal').on('hide.bs.modal', function() { .... 

然後，處理程序中，使用$(this)指在該事件起源於「模」元素。每個模式將在其「hide.bs.modal」事件後觸發相同的處理程序，並通過$(this)引用自身。

---

看着你的最新編輯的代碼，似乎你不正確時，對話框關閉處理previous-dialog數據。在您引用的CodePen sample中，請注意previous-dialog的jQuery對象如何存儲在targetDialog中，以便在關閉targetDialog時可以恢復它。

$(function() { 
 

 
    $('.btn[data-toggle=modal]').on('click', function() { 
 

 
    var $btn = $(this), 
 
     currentDialog = $btn.closest('.modal-dialog'), 
 
     targetDialog = $($btn.attr('data-target')); 
 

 
    if (!currentDialog.length) { 
 
     return; 
 
    } 
 

 
    /** 
 
    * Current dialog gets stored as "previous dialog" in the dialog that's about to open (the target). 
 
    * When the target dialog closes, the previous dialog can be restored to primary position. 
 
    */ 
 

 
    targetDialog.data('previous-dialog', currentDialog); 
 
    currentDialog.addClass('aside'); 
 

 
    var stackedDialogCount = $('.modal.in .modal-dialog.aside').length; 
 
    if (stackedDialogCount <= 5) { 
 
     currentDialog.addClass('aside-' + stackedDialogCount); 
 
    } 
 

 
    }); 
 

 
    $('.modal').on('hide.bs.modal', function() { 
 

 
    /** 
 
    * Here's where the "previous dialog" gets restored. 
 
    * The dialog that's firing the "hide" event has a "previous dialog" stored in it from when it was opened. 
 
    * That previous dialog gets its "aside" class removed. 
 
    */ 
 

 
    var $dialog = $(this), 
 
     previousDialog = $dialog.data('previous-dialog'); 
 

 
    if (previousDialog) { 
 
     previousDialog.removeClass('aside'); 
 
     $dialog.data('previous-dialog', undefined); 
 
    } 
 

 
    }); 
 

 
});

.modal.in { 
 
    -webkit-perspective: 2000px; 
 
    -moz-perspective: 2000px; 
 
    -ms-perspective: 2000px; 
 
    -o-perspective: 2000px; 
 
    perspective: 2000px; 
 
} 
 

 
.modal.in .modal-dialog.aside { 
 
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    -o-transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    transform: scale(0.8) rotateY(45deg) translateZ(-340px); 
 
    -webkit-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.modal.in .modal-dialog.aside.aside-1 { 
 
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-300px)); 
 
} 
 

 
.modal.in .modal-dialog.aside.aside-2 { 
 
    -webkit-transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
    -ms-transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
    -o-transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
    transform: scale(0.8) rotateY(45deg) translateZ(calc(-260px)); 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 

 

 
<button type="button" data-toggle="modal" data-target="#test-modal">Open Modal</button> 
 

 
<div class="modal fade" id="test-modal"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
    
 
     <div class="modal-header" style="background: rgba(0, 0, 0, 0.2);"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title" style="text-align: center;"><strong>EVENT RETURNED:</strong></h4> 
 
     </div> 
 

 
     <!-- rows removed for brevity --> 
 

 
     <button type="button" class="btn btn-default" data-toggle="modal" data-target="#test-modal-2">Launch Modal 2</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="test-modal-2"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"> 
 
      <span aria-hidden="true">&times;</span> 
 
      <span class="sr-only">Close</span> 
 
     </button> 
 
     <h4 class="modal-title">Modal title 2</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>One fine body&hellip;</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-toggle="modal" data-target="#test-modal-3">Launch Modal 3</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="test-modal-3"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"> 
 
      <span aria-hidden="true">&times;</span> 
 
      <span class="sr-only">Close</span> 
 
     </button> 
 
     <h4 class="modal-title">Modal title 3</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>One fine body&hellip;</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>