javascript - 同一页面中的各种模态窗口

Question

我在同一页面中有两个模态窗口，但是当我单击带有属性的按钮时:data-target='#change' 更改模态窗口不显示它。

我没有关于 js 的经验，我可能是代码的问题:

<div class="pull-left btn-group">
                  <button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button>
<button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button>

<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                        <h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>    
                    </div>
                    <div class="modal-body">
                        <div class=" text-center">
                            <div class="btn-group-vertical">

                                <div class="btn-group">
                                    <button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button>
                                </div>

                                <div class="btn-group">
                                    <button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button>
                                </div>

                                <div class="btn-group">
                                    <button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>    
                                </div>

                                <div class="btn-group">
                                    <button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button>
                                </div>

                            </div>   
                        </div>
                    </div>
                </div>
            </div> 
        </div>
                </div>

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                    <h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3>
            </div>              
        </div>
    </div> 
</div>


/* EDIT MODAL WINDOW */

$('#edit').on('show.bs.modal', function (event) {

      var $button = $(event.relatedTarget) // Button that triggered the modal
      var row = $button.closest("tr"), // edit button is in the same row as data you want to change
      $tds = row.find("td"); // get all table cells in that row

      $.each($tds, function(index,value) {

        var field = $(this).data("field");

        console.log($(this).text());

        $('[name="' + field +'"]').val($(this).text()); //input name in the modal window
      });

     var src_value = $tds.closest("td").find('img').attr('src');
     $('[name="imagen"]').attr("src",src_value);

});

/* CHANGE MODAL WINDOW */

$('#change').on('show.bs.modal', function (event) {

     alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));

});

请帮帮我吗？

Answer 1

带有属性 data-target='#change' 的按钮可以正常工作，因为您的页面中有一个 id 为 change 的 div，您只需发表评论show.bs.modal 事件中的警报，因为那里有一个 undefined variable $table。

注意:第二个按钮将不起作用，因为 data-target 属性引用代码中不存在的 #edit 元素。

希望这有帮助。

$('#edit').on('show.bs.modal', function (event) {

  var $button = $(event.relatedTarget) // Button that triggered the modal
  var row = $button.closest("tr"), // edit button is in the same row as data you want to change
      $tds = row.find("td"); // get all table cells in that row

  $.each($tds, function(index,value) {

    var field = $(this).data("field");

    console.log($(this).text());

    $('[name="' + field +'"]').val($(this).text()); //input name in the modal window
  });

  var src_value = $tds.closest("td").find('img').attr('src');
  $('[name="imagen"]').attr("src",src_value);

});

/* CHANGE MODAL WINDOW */

$('#change').on('show.bs.modal', function (event) {

  //alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="pull-left btn-group">
  <button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button>
  <button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button>

  <div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
          <h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>    
        </div>
        <div class="modal-body">
          <div class=" text-center">
            <div class="btn-group-vertical">

              <div class="btn-group">
                <button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button>
              </div>

              <div class="btn-group">
                <button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button>
              </div>

              <div class="btn-group">
                <button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>    
              </div>

              <div class="btn-group">
                <button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button>
              </div>

            </div>   
          </div>
        </div>
      </div>
    </div> 
  </div>
</div>

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3>
      </div>              
    </div>
  </div> 
</div>