Question

我需要使用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]);

    })

};

所以我有两个问题：

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

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

Answer 1

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

_{在这里阅读更多absout闭包How do JavaScript closures work?}

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 );
    });
}

Answer 2

该变量仅存在于作为keyup事件的回调传递的函数范围内，因此我并不真正看到需要为其提供动态名称;你可以把它完全称为任何东西而不会发生冲突。

Answer 3

试试这个：

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]);

    })

Answer 4

 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);
})

我认为你不需要从数组命名变量，是吗？

Answer 5

您可以直接从数组构建选择器并完全跳过循环。使用当前输入的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*/

Answer 6

对于替代方法，我建议给#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

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

我created a jsfiddle代码在。

Answer 7

@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中的每个函数：http://api.jquery.com/jQuery.each/

对你来说应该更容易; - ）

使用数组值作为变量名称

7 个答案: