了解函數如何使用和存儲變量

Question

我很抱歉，這已在其他地方被問到/回答過。 我可能不知道找到所需結果的正確術語。

我正在構建一種 web 應用程序，在一個區域中，用戶單擊一個按鈕，其中從按鈕 ID 末尾的數字獲取變量，然后傳遞給其他函數以用於進一步處理。 我遇到的問題是每次單擊類似按鈕時，先前單擊的變量仍存儲在這些函數中。

JavaScript 不是我的強項，所以我建立了一個小小提琴，以更小的規模展示我的問題。 如果您單擊小提琴中的“提交 1”，然后單擊 ALERT CUST_NUM，則會出現一個警告框，顯示變量的值。 但是，如果您使用 Submit 1 或 Submit 2 重復該過程（然后再次單擊 ALERT 按鈕），而不是警告變量的單個實例，它將依次顯示多個警告框。 依此類推，如果您單擊 Submit 1，然后單擊 ALERT CUST_NUM，然后單擊 Submit2 等，它會警告一系列 windows 中的變量鏈。 我希望有人能解釋為什么會發生這種情況，因為我預計 function 中只存在一個變量實例，每次都會被覆蓋。

 $(".submit-btn1").click(function() { var cust_num = parseInt(this.id.replace('test-button-', ''), 10); testFunction(cust_num); }) $(".submit-btn2").click(function() { var cust_num = parseInt(this.id.replace('test-button-', ''), 10); testFunction(cust_num); }) function testFunction(cust_num) { $("#alert-btn").click(function() { alert(cust_num); }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="submit-btn1" id="test-button-1"> Submit 1 </button> <br/> <button class="submit-btn2" id="test-button-2"> Submit 2 </button> <br/> <button id="alert-btn"> ALERT CUST_NUM </button>

Answer 1

每次單擊submit-btn1或submit-btn2時，都會添加一個新的事件處理程序， cust_num烘焙到alert-btn中。 如果您清除了以前的事件處理程序，如下所示：

function testFunction(cust_num) {
    $("#alert-btn").off(); 
    $("#alert-btn").click(function(){ 
    alert(cust_num);
  })
}

那么您將只有一個事件處理程序。

---

更好的方法是為alert-btn創建一個事件處理程序，如下所示：

 var cust_num = 0; $(document).ready(function() { $(".mybuttons").click(function(){ cust_num = parseInt(this.id.replace('test-button-',''), 10); }) $("#alert-btn").click(function(){ alert(cust_num); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="mybuttons" id="test-button-1">Submit 1</button> <br/> <button class="mybuttons" id="test-button-2">Submit 2</button> <br/> <button id="alert-btn">ALERT CUST_NUM</button>

Answer 2

我更喜歡用於提取 id 並替換 output 按鈕處理程序的輸入按鈕的單個處理程序...

 $("#test-button-1, #test-button-2").click(function() { const alertWith = +(this.id.match(/\d+$/)[0]); // digits at end of a string $("#alert-btn").off('click').on('click', () => alert(alertWith)); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="submit-btn1" id="test-button-1"> Submit 1 </button> <br/> <button class="submit-btn2" id="test-button-2"> Submit 2 </button> <br/> <button id="alert-btn"> ALERT CUST_NUM </button>

Answer 3

jdt 的答案是關於您的代碼發生了什么。

如前所述，重復的是附加到 click 事件的偵聽器，每個偵聽器都有其testFunction實例。 實際上，每次調用testFunction時，都存在一個test_num實例，正如預期的那樣。

我不喜歡給貓剝皮；）然而

天地間有更多的東西，霍拉旭，比你的哲學所夢想的還要多……

JQuery 是一個漂亮的庫，它提供了許多方法來解決這個簡單的難題。 恕我直言，值得關注的一個特別 function 是官方文檔的.data()鏈接

它允許：

• 從 html 標簽的數據屬性中提取值
• 將數據附加到 dom 元素

在這種情況下，只需對 html 進行細微更改，即可使用這些功能為每個數字按鈕攜帶數字，並將其直接附加到警報按鈕。

 // listen for click event on any button with an id // that begins with 'test-button' $("button[id^='test-button']").click(function() { // take the value from the attribute of the clicked // element and assign it to the alert button $("#alert-btn").data("lastSelectedNum", $(this).data().num) }) $("#alert-btn").click( function() { // the alert will display the value assigned // or 'unset' if it's undefined alert( $(this).data().lastSelectedNum?? "unset") });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="test-button-1" data-num=1> Submit 1 </button> <br/> <button id="test-button-2" data-num=2> Submit 2 </button> <br/> <button id="alert-btn"> ALERT CUST_NUM </button>