Question

我在这里做错了什么（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

currentButton前缀var。没有它，变量的值将被分配给全局范围中的变量，因为您还没有在其他地方声明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。
您可以在选择器上绑定each处理程序，而不是使用click进行循环。

推荐代码（演示：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

您遇到类似closure-in-a-loop problem的内容，因为您的变量是全局。
在执行事件处理程序时，它将访问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/

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

4 个答案:

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