將變量從函數傳遞到jQuery中的另一個函數

Question

我是Javascript領域的新手，我搜尋了很多類似問題，但從未為我工作。

因此，我正在使用Bootstrap模態，我有3個名稱不同的按鈕可以打開模態窗口。 當我關閉模式窗口時，我想要一個警報，向我顯示我單擊的按鈕的名稱。

例如，如果我單擊按鈕“發送電子郵件給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的工作方式。 沒有本地顯示和隱藏事件。 因此，您在此處有自定義事件。 順便說一句。 引用引導程序參考時，應該顯示它shown.bs.modal （識別代碼中缺少的“ n”），或者我錯了，他們進行了一些更改。

您可以將按鈕名稱保存在變量中，如下所示：

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

根據您對問題的了解，我制作了一個工作演示。

請看一下並詢問您需要解釋的內容。

 $(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); }); }); 

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