Question

使用jQuery，我正在尝试创建一个表单，我从中获取每个字段中输入的值并生成提交表。出于某种原因，我似乎无法传递正确的变量。

以下是相关的HTML：

<form id="myform">
 <ul id="pq_entry_1" class="clonedSection">
  <li><input id="name_1" name="name_1" value="name1" type="text" /></li>
  <li><input id="init_1" name="init_1" value="1" type="number" min="-100" max="100"/></li>
 </ul>

 <ul id="pq_entry_2" class="clonedSection">
  <li><input id="name_2" name="name_2" value="name2" type="text" /></li>
  <li><input id="init_2" name="init_2" value="1" type="number" min="-100" max="100"/></li>
 </ul>

 <ul id="pq_entry_3" class="clonedSection">
  <li><input id="name_3" name="name_3" value="name3" type="text" /></li>
  <li><input id="init_3" name="init_3" value="1" type="number" min="-100" max="100"/></li>
 </ul>
 <input id="submit" type="submit" value="Submit" name="submit">
</form>

<table>
 <thead>
  <th>Character</th>
  <th>Initiative</th>
 </thead>
     <tbody id="results">
     </tbody>
</table>
</body>

jQuery脚本：

$(document).ready(function(){
    $('#myform').submit(function() {
        $('.clonedSection').each(function() {
            var stname = $('input[type=text]').val();
            var stinit = $('input[type=number]').val();
            $('#results').append('<tr><td>'+stname+'</td><td>'+stinit+'</td></tr>');
        });
    return false;
    });
});

......在这里它正在行动，它现在的工作方式：http://jsfiddle.net/KredH/

您可以看到“submit”上的预期行为是列出所有字段内容（默认情况下，name1，name2，name3 ......），但它只列出第一个块中的内容。

任何帮助都将不胜感激。

Answer 1

您正在尝试获取文本框而不传递上下文，因此$('input[type=text]').val();将始终在每次迭代中返回相同的文本。因此，您将获得相同的值。相反，您可以传递当前clonedSection作为jquery选择器的上下文（this引用循环中的当前clonedSection）;

试试这个：

$(document).ready(function(){
    $('#myform').submit(function() {
        $('.clonedSection').each(function() {
            var stname = $('input[type=text]', this).val(); //Notice the change here
            var stinit = $('input[type=number]', this).val(); //Notice the change here
            $('#results').append('<tr><td>'+stname+'</td><td>'+stinit+'</td></tr>');
        });
    return false;
    });
});

http://jsfiddle.net/KredH/1/

jQuery：使用.val（）为.each（）循环中的变量赋值？

1 个答案: