Question

我正在学习jQuery。我不是忍者。在阅读W3Schools的following教程后，我想尝试一些困难的事情。所以我修改了他们的样本一点点写道：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
     for(i=1;i<7;i++)              // Getting the values from the input boxes
        {
           var a[i] = $("#test"+i).val();
         }  

   for(i=1;i<7;i++)              //printing the values in the document
        {
           document.write("<p>"+a[i]+"</p>");
         }  
  });
});
</script>
</head>

<body>

<p>Name: <input type="text" id="test1" value="Mickey Mouse"></p><br>
<p>Name: <input type="text" id="test2" value="Mickey "></p><br>
<p>Name: <input type="text" id="test3" value="Mouse"></p><br>
<p>Name: <input type="text" id="test4" value="Micse"></p><br>
<p>Name: <input type="text" id="test5" value="Mice"></p><br>
<p>Name: <input type="text" id="test6" value="use"></p><br>

<button>Show Value</button>
</body>
</html>

这一行var a[i] = $("#test"+i).val();，这是可能的。我的意思是使用“+”符号来识别ID。？

代码无效。它应该显示在html页面上的字段中所做的所有输入。但它没有显示任何回应。我有什么错误，jQuery不支持吗？

Answer 1

你可以写

  var a = [];
  $("button").click(function(){
       $("[id^=test]").each(function(){a[+this.id.slice(-1)]=this.value});
  });

请注意，必须在填充数组之前创建该数组。在您的代码中，最好使用i声明变量var i=...。

获取数组中所有值而不进行循环的另一种解决方案是：

  $("button").click(function(){
    var a = $("[id^=test]").map(function(){return this.value}).get();
  });

如果要在文档中添加一些元素，请使用append：

  $('<p>'+a[i]+'</p>').appendTo(document.body);

如果你想一气呵成，你可以这样写：

$($("[id^=test]").map(function(i){
      return '<p>value ' + i + '= '+this.value+'</p>'
}).get().join('')).appendTo(document.body);

Demonstration

但是通常有很多方法可以用jQuery做事。

Answer 2

首先，您需要在for循环之外将a声明为数组。这将允许您的代码按原样运行，但是您将失去所有的html。

$(document).ready(function () {
    $("button").click(function () {
        var a = [];
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            a[i] = $("#test" + i).val();
        }

        for (i = 1; i < 7; i++) //printing the values in the document
        {
            document.write("<p>" + a[i] + "</p>");
        }
    });
});

为避免丢失所有html，请在包含输出的html中添加div，例如

    <div id="output"></div>
</body>

然后用$("#output").append("<p>" + a[i] + "</p>");

替换你的document.write

$(document).ready(function () {
    $("button").click(function () {
        var a = [];
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            a[i] = $("#test" + i).val();
        }
        $("#output").empty();
        for (i = 1; i < 7; i++) //printing the values in the document
        {
            $("#output").append("<p>" + a[i] + "</p>");
        }
    });
});

但是，你仍然有两个for循环，你可以把它减少到这样一个：

$(document).ready(function () {
    $("button").click(function () {
        $("#output").empty();
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            $("#output").append("<p>" + $("#test" + i).val() + "</p>");
        }
    });
});

那很好，但我们还没有完成。 $（“＃output”）是一个相对昂贵的方法调用，我们可以通过在变量中缓存它并重用它来减少到只进行一次而不是七次：

$(document).ready(function () {
    $("button").click(function () {
        var outputDiv = $("#output").empty();
        for (i = 1; i < 7; i++) // Getting the values from the input boxes
        {
            outputDiv.append("<p>" + $("#test" + i).val() + "</p>");
        }
    });
});

现在代码可以快速高效地运行，但是如果我们添加了另一个输入，我们必须将幻数（7）增加1.为什么不在输入上循环呢？

$(document).ready(function () {
    $("button").click(function () {
        var outputDiv = $("#output").empty();
        // $("input[id^=test]") selects all inputs that have an id that starts with "test"
        $("input[id^=test]").each(function(){
            outputDiv.append("<p>" + this.value + "</p>");
        });
    });
});

你可以通过将.append移动到每个循环之外来做更多事情，但是在这种情况下，与其需要的附加代码相比，这不会产生显着差异。

Answer 3

要将包含每个输入值的段落附加到页面，您可以执行此操作 - http://jsfiddle.net/6PQgq/

$("button").click(function(){
    $('input').each(function(){
        $('body').append('<p>'+$(this).val()+'</p>');
    });
});

使用循环来获取一行代码的输入

3 个答案: