0

我正在学习 jQuery。我不是忍者。在 W3Schools阅读了以下教程后，我想尝试一些困难的东西。所以我稍微修改了他们的样本，写了这个：

<!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();，这可能吗。我的意思是使用“ +”符号来识别身份。?

代码不起作用。它应该显示在 html 页面上的字段中所做的所有输入。但它没有显示任何回应。我犯了 jQuery 不支持的任何错误吗？

4

3 回答 3

2

你可以写

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

示范

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

于 2013-01-21T19:39:33.367 回答
2

首先，您需要a在 for 循环之外声明为数组。这将允许您的代码按原样工作，但是您将丢失所有 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>

然后将您的 document.write 替换为$("#output").append("<p>" + a[i] + "</p>");

$(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 移到每个循环之外来做更多的事情，但是在这种情况下，与它所需的附加代码相比，这不会产生显着差异。

于 2013-01-21T19:59:23.553 回答
1

要将包含每个输入值的段落附加到页面，您可以这样做 - http://jsfiddle.net/6PQgq/

$("button").click(function(){
    $('input').each(function(){
        $('body').append('<p>'+$(this).val()+'</p>');
    });
});
于 2013-01-21T19:45:57.517 回答