了解函式如何使用和存盤變數-有解無憂

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

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

JavaScript 不是我的強項，所以我構建了一個小小提琴，以更小的規模演示我的問題。如果您單擊小提琴中的“提交 1”，然后單擊 ALERT CUST_NUM，警告框將顯示變數的值。但是，如果您使用 Submit 1 或 Submit 2 重復該程序（然后再次單擊 ALERT 按鈕），而不是警告變數的單個實體，它將依次顯示多個警告框。依此類推，如果您單擊提交 1，然后單擊 ALERT CUST_NUM，然后單擊提交 2，等等，這樣它就會在一系列視窗中提醒變數鏈。我希望有人能解釋為什么會發生這種情況，因為我原以為函式中只存在變數的一個實體，每次都會被覆寫。

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

uj5u.com熱心網友回復：

每次單擊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>

uj5u.com熱心網友回復：

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

正如已經解釋過的，重復的是附加到警報按鈕的單擊事件的偵聽器，每個偵聽器都有它的testFunction. 實際上，每次testFunction呼叫時，都存在的單個實體test_num，正如預期的那樣。

我不喜歡給貓剝皮 ;) 但是

天地間有更多的東西，Horatio，比你的哲學夢想還多……

JQuery 是一個漂亮的庫，它提供了許多方法來解決這個簡單的難題。恕我直言，值得關注的一項特殊功能是.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>

uj5u.com熱心網友回復：

我更喜歡輸入按鈕的單個處理程式來提取 id 并替換輸出按鈕處理程式...

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361815.html

標籤：javascript 查询功能变量

上一篇：Javascript將日期格式從“dd/mm/yy”轉換為“mm/dd/yyyy”

下一篇：如何在將滑鼠懸停在組織結構圖上時顯示影像