从循环中获取数据并在脚本中使用它

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

我需要一些帮助。

所以我将$ i定义为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>