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

Posted 2023-02-19

【中文标题】了解函数如何使用和存储变量

【英文标题】：Understanding how functions use and store variables

【发布时间】：2021-12-30 23:19:12

【问题描述】：

我很抱歉，这已在其他地方被询问/回答。我可能不知道找到所需结果的正确术语。

我正在构建一种网络应用程序，在一个区域中，用户单击一个按钮，其中一个变量是从按钮 ID 末尾的数字中获取的，然后传递给其他函数以用于进一步处理。我遇到的问题是每次单击类似按钮时，先前单击的变量仍存储在这些函数中。

javascript 不是我的强项，所以我构建了一个小小提琴，以更小规模展示我的问题。如果您单击小提琴中的“提交 1”，然后单击 ALERT CUST_NUM，一个警报框将显示变量的值。但是，如果您使用 Submit 1 或 Submit 2 重复该过程（然后再次单击 ALERT 按钮），而不是警告变量的单个实例，它将依次显示多个警告框。依此类推，如果您单击 Submit 1，然后单击 ALERT CUST_NUM，然后单击 Submit2，等等，这样它就会在一系列窗口中提醒变量链。我希望有人能解释为什么会发生这种情况，因为我本来希望函数中只存在一个变量实例，每次都会被覆盖。

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

【参考方案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>

【参考方案2】：

jdt's answer 了解您的代码发生了什么。

如前所述，重复的是附加到警报按钮的单击事件的侦听器，每个侦听器都有其testFunction 的实例。 实际上，每次调用testFunction 时，都存在test_num 的单个实例，正如预期的那样。

我不喜欢给猫剥皮；）然而

天地间还有更多的东西，Horatio， 比你的哲学所梦想的...

JQuery 是一个漂亮的库，它提供了许多方法来解决这个简单的难题。恕我直言，值得关注的一个特殊功能是.data()link to official documentation

它允许：

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

【参考方案3】：

我希望输入按钮的单个处理程序提取 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>