单击多个按钮之一，将值放入文本输入

我在这里做错了什么（ http://jsfiddle.net/dsqBf/2/ ）？

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

JavaScript代码：

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

我错过了一个我不知道的概念吗？ 谢谢！

Answer 1

由var前缀currentButton 。 没有它，变量的值将被分配给全局范围中的变量，因为您尚未在其他任何地方声明currentButton 。 因此， currentButton的值更改为最后一个按钮的值（因为只有一个变量）。

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

其他说明：

• thebuttons已经是一个jQuery对象，所以你不应该再将它包装在$ 。
• $("#theinput")可能不会随时间而改变。 所以，我建议缓存这个变量。
• 另一方面，当前按钮的值可能会改变。 我建议在点击处理程序中使用this.value 。
• 您也可以在选择器上绑定click处理程序，而不是使用each循环。

推荐代码（演示： http ： //jsfiddle.net/dsqBf/11/ ）

 var $theButtons = $(".button"); var $theinput = $("#theinput"); $theButtons.click(function() { $theinput.val(this.value); }); 

带有$带前缀的jQuery变量，因为它是这样做的惯例。 因为$ ，你（和其他人）知道变量是一个jQuery对象，这节省了昂贵的调试时间。

Answer 2

您正在使用.each（）而不是基本的.click（）。 查看我的更新。

http://jsfiddle.net/dsqBf/3/

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

Answer 3

您遇到类似于闭环问题的事情，因为您的变量是全局变量。
在执行事件处理程序时，它将访问buttonValue ，其中包含each循环的最后一次迭代的值。

有两种方法可以解决这个问题：您可以通过预先设置var或者将代码重写为：

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

Answer 4

你应该做

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

在这里摆弄http://jsfiddle.net/dsqBf/6/