Jquery 单击多个按钮之一，在文本输入中输入值

我在这里做错了什么

我试图将单击按钮的值输入到文本输入中。如果单击任何按钮，最后一个按钮的值将插入到文本输入中

JavaScript代码：

var theButtons = $(".button");
$(theButtons).each(function(index) {
    currentButton = $(this);
    buttonValue = currentButton.val();
    currentButton.click(function() {
        $("#theinput").val(buttonValue);
    });
});

---

我是否遗漏了一个我不知道的概念？谢谢

前缀

currentButton

by

var

。如果没有它，变量的值将分配给全局范围内的变量，因为您没有在其他任何地方声明

currentButton

。因此，

currentButton

的值更改为最后一个按钮的值（因为只有一个变量）

其他说明：

• 按钮

  已经是jQuery对象，因此不应再次将其包装在

  $

  中

• $（“#输入”）

  可能不会随时间而改变。因此，我建议缓存这个变量
• 另一方面，当前按钮的值可能会改变。我建议在单击处理程序中使用

  this.value

• 您还可以绑定选择器上的

  单击
  处理程序，而不是使用
  每个
  循环

推荐代码（演示：） 在jQuery变量前面加上

$

，因为这是惯例。由于

$

，您（和其他人）知道该变量是一个jQuery对象，这节省了昂贵的调试时间。

您应该这样做

var theButtons = $(".button");

theButtons.click(function(index) {
    var currentButton = $(this);
    var buttonValue = currentButton.val();

  $("#theinput").val(buttonValue);

});

在此处拨弄

您使用的是.each（）而不是basic.click（）。查看我的更新

---

您正在经历类似的情况，因为您的变量是全局的
在执行事件处理程序时，它将访问

按钮value

，其中包含每个

循环最后一次迭代的值

有两种方法可以解决这个问题：您可以通过在
var
前面加上前缀使变量成为局部变量，或者将代码重写为：

$(".button").click(function() {
    $("#theinput").val($(this).val());
});

非常感谢。“缓存此变量”是什么意思？@sloopjohnB如答案底部所示，将jQuery对象存储在循环外部的变量中。单击处理程序。
var theButtons = $(".button");

theButtons.click(function(index) {
    var currentButton = $(this);
    var buttonValue = currentButton.val();

  $("#theinput").val(buttonValue);

});

var theButtons = $(".button");

$(theButtons).click(function() {
    $("#theinput").val($(this).val());
});

$(".button").click(function() {
    $("#theinput").val($(this).val());
});