了解函数如何使用和存储变量

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>