1

我需要使用 jQuery 的 keyup 函数从输入的 html 表单元素中获取值，并在其他地方的 div 中显示所述值。

工作代码如下所示：

$('#name').keyup(function() {
    var name = $(this).val();
    $('#name-in-document').html(name);
});

由于我有许多相同的上述代码块实例，我想使用一个 for 循环来循环一个值数组。catch 是第二行中变量的名称

var name = $(this).val();

将来自数组。

我尝试了以下循环，但它不起作用，因为（据我了解）Javascript 变量不能命名为数组值：

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var inputsArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(inputsArray[i]);

    })

};

所以我有两个问题：

  1. 我不能使用数组值在 for 循环中创建变量是真的吗？
  2. 是否有另一种方法来完成可能有效的相同事情（从数组中获取变量名）？

我刚刚开始使用 JavaScript，非常感谢任何见解。谢谢！

4

7 回答 7

3

1.这不是真的
2.您需要对变量i或inputArray[i]事件绑定中的值进行闭包，关键字this指的是 DOMNode 女巫触发事件：

在这里阅读更多关于闭包的内容 JavaScript 闭包是如何工作的？

var inputsArray = ["phone", "name", "address"],
    i = 0,
    len = inputsArray.length;

for ( ; i < len; i ++ ) {
    makeKeyupBind(inputsArray[i]);
} 

function makeKeyupBind( value ) {
    $("#" + value).on("keyup", function() {
        $("#" + value + "-in-document").html( this.value );
    });
}
于 2012-11-22T15:57:51.180 回答
1

该变量仅存在于作为keyup事件回调传递的函数范围内，因此我真的不认为需要给它一个动态名称；你完全可以称它为任何东西，而不会遇到冲突。

于 2012-11-22T15:57:14.353 回答
0

试试这个：

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

    $("#"+inputsArray[i]).keyup(function() {

    var valuesArray[i] = $(this).val();
    $("#"+inputsArray[i]+"-in-document").html(valuesArray[i]);

    })
于 2012-11-22T15:56:15.457 回答
0 
 var inputsArray = ["phone", "name", "address"]; 
 for (var i = 0; i < inputsArray.length; i++) {
   $("#"+inputsArray[i]).keyup(function() {

   var htmlValue = $(this).val();
   $("#"+inputsArray[i]+"-in-document").html(htmlValue);
})

我认为您不需要从数组中命名变量，对吗？

于 2012-11-22T15:57:17.280 回答
0

您可以直接从数组构建选择器并完全跳过循环。使用当前输入的 id 为其他元素创建选择器

var inputsArray = ["phone", "name", "address"];

$('#'+ inputsArray.join(',#') ).keyup(){
   $('#'+this.id+"-in-document").html(  $(this).val() );
})

这将创建选择器：

$('#phone,#name,#address')

以上假设您正在尝试查找元素：

 $("#phone-in-document").html(val);
   $("#name-in-document").html(val);/* etc*/
于 2012-11-22T16:00:41.463 回答
0

对于替代方法，我建议给#name（和他的朋友）一个类名，例如

<input class="js-key-up" id="name" />

然后你可以完全取消数组和for循环。此外，添加新的 HTML 元素不需要将项目添加到数组中。

HTML

<input class="js-key-up" id="phone">
<input class="js-key-up" id="name">
<input class="js-key-up" id="address">

<p id="phone-in-document"></p>
<p id="name-in-document"></p>
<p id="address-in-document"></p>

JavaScript ​</p> 

$('.js-key-up').keyup(function (e) {
    var id = $(this).attr('id');
    $('#' + id + '-in-document').html($(this).val());
});​

我创建了一个带有代码的jsfiddle。

于 2012-11-22T16:08:27.223 回答
0

@Wes Cossick：循环内的这条线是错误的：

var valuesArray[i] = $(this).val();

如果你想这样做，在循环之前声明数组。那是OP的问题

@diana：如果我理解你是正确的，你想为数组中的每个项目添加一个动态 keyup 处理程序吗？如果是这种方式，那么该代码应该这样做（不要重新分配数组中的项目！）诀窍是创建一个闭包（代码未经测试）。

var inputsArray = ["phone", "name", "address"];

for (var i = 0; i < inputsArray.length; i++) {

  (function(item) {
    $("#"+item).keyup(function() {
      $("#"+item+"-in-document").html($(this).val());
    });
  })(inputsArray[i]);

};

如果您使用的是 jQuery（而且看起来如此；-），请查看 jQuery 中的 each-function：http: //api.jquery.com/jQuery.each/

这对你来说应该容易得多;-)

于 2012-11-22T16:20:32.673 回答