Question

我是Javascript世界的新手，我搜索了很多类似的问题，但从未为我工作过。

所以我正在使用Bootstrap模式，我有3个不同名称的按钮打开模态窗口。当我关闭模态窗口时，我想要一个警告，显示我点击的按钮的名称。

例如，如果我点击“Email Ted”按钮，当我关闭模式时，警报会显示“您尚未向Ted发送消息”。

我从每个按钮的 data-name =“”属性中获取名称。

我还尝试在全局变量中插入第一个函数，但没有奏效;所以下面的代码是我想要做的一个想法。

$(document).ready(function() {

      $("#exampleModal").on('show.bs.modal', function(e) {
        var button = $(e.relatedTarget);
        var recipient = button.data('name');
        var modal = $(this);
        modal.find('.modal-title').text('New message to ' + recipient);
        return String(recipient);
      });


      $('#exampleModal').on('hidden.bs.modal', function(recipient) {
        alert('The message will not be sended to ' + recipient);
      });

    });

谢谢！

Answer 1

首先，重要的是要提到您的代码段不仅仅是一般的JavaScript，而是Twitter Bootstrap的工作方式。没有本机显示和隐藏的事件。所以你在这里有自定义事件。 Btw. referring to the bootstrap reference, it should be shown.bs.modal (recognize the missing 'n' in your code)或者我错了，他们做了一些改变。

您可以保护变量中的按钮名称，如下所示：

$(document).ready(function() {

      var recipient = null;

      $("#exampleModal").on('shown.bs.modal', function(e) {
        var button = $(e.relatedTarget);
        var modal = $(this);
        recipient = button.data('name');
        modal.find('.modal-title').text('New message to ' + recipient);
      });


      $('#exampleModal').on('hidden.bs.modal', function(recipient) {
        if (recipient) {
            alert('The message will not be sended to ' + recipient);
            recipient = null; // important to reset this var for a second trigger
        }
      });

  });

Answer 2

我根据我对你的问题的理解做了一个工作演示。

请查看并询问您需要解释的内容。

＆＃13;

$(document).ready(function() {

  
  $("#open").on("click",function(){
    $("#exampleModal").modal("show");
  });
  
  var recipient="";
  
  $("#exampleModal").on('show.bs.modal', function(e) {
    recipient = $("#open").data('name');
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    return String(recipient);
  });


  $('#exampleModal').on('hidden.bs.modal', function() {
    alert('The message will not be sended to ' + recipient);
  });

});

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-name="TEST Name">Close</button>
      </div>
    </div>
  </div>
</div>

<button id="open" data-name="John Doh">Open modal</button>

＆＃13;

在jQuery中将变量从函数传递给另一个函数

2 个答案: