Question

我在表单内部动态生成了一些输入字段。我试图读取隐藏输入的值并附加到文本区域的末尾

   .<input type="hidden" id="formtype_loans_0_comment" name="formtype[loans][0][comment]" disabled="disabled" value="VAlue 1 value 123" />
    <textarea id="formtype_loans_0_description" name="formtype[loans][0][description]">Text Area 1 or 1 </textarea>

    <input type="hidden" id="formtype_loans_1_comment" name="formtype[loans][1][comment]" disabled="disabled" value="VAlue value 123" />
    <textarea id="formtype_loans_1_description" name="formtype[loans][1][description]">test desc</textarea>

以下是js代码，但它不起作用，

var values = [];

$("input[name='formtype[loans][][description]']").each(function() {
    values.push($(this).val());
});
alert(values);

Answer 1

您的选择器"input[name='formtype[loans][][description]']"与任何元素都不匹配，因为中间的[]与中间的[0]或[1]（等）不匹配实际元素name属性。

对于显示的HTML，您可以使用attribute starts with selector [name^=value]：

$('input[name^="formtype[loans]"]').each(function() {

如果每个textarea总是会立即跟随其关联的隐藏输入，那么在.each()循环中迭代输入，您可以说$(this).next()来获取textarea。

如果textareas可能位于DOM的其他位置，那么您可以通过基于当前输入的名称选择name属性来找到它们：

$('textarea[name="' + this.name.replace("comment", "description") + '"')

在上下文中展示：

$('input[name^="formtype[loans]"]').each(function() {
  var val = this.value
  // add input's value to end of associated textarea's existing value:
  $('textarea[name="' + this.name.replace("comment", "description") + '"')
    .val(function(i, v) { return v + ' ' + val })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="hidden" id="formtype_loans_0_comment" name="formtype[loans][0][comment]" disabled="disabled" value="Hidden value 0" />
<textarea id="formtype_loans_0_description" name="formtype[loans][0][description]">Text Area A</textarea>

<input type="hidden" id="formtype_loans_1_comment" name="formtype[loans][1][comment]" disabled="disabled" value="Hidden value 1" />
<textarea id="formtype_loans_1_description" name="formtype[loans][1][description]">Text Area B</textarea>

如果您只想简单地替换textarea的当前值而不是添加到它的末尾，那么您可以将上述内容简化为：

$('input[name^="formtype[loans]"]').each(function() {
  $('textarea[name="' + this.name.replace("comment", "description") + '"')
    .val(this.value)
})

Answer 2

var values = [],
    inputs = $('input[type="hidden"]'),
    textareas = $('textarea');

if (inputs.length === textareas.length) {
    $.each(inputs, function(i, input) {
        var val = ($(input).val()) ? $(input).val(): undefined;
        if (val) {
            $(textareas).eq(i).empty().val(val);
        }
    });
}

alert(values);

上面的工作代码假设了几件事：

每个隐藏输入总会有一个textarea。
关联的textarea将始终是隐藏输入后的下一个兄弟。

即使情况并非如此，仍有各种方法可以解决这一挑战。但我会分解代码的不同部分：

首先，实例化你的变量。最重要的是，将选定的HTML元素缓存到变量中：触摸DOM 昂贵并对性能产生负面影响（例如，每次循环时查询DOM）。

接下来，我们进行了条件测试，以确保每个输入都有一个textarea。无需浪费时间迭代循环查找不存在的元素。

最后，遍历每个选定的输入，确认每个输入都有一个值。同样，如果没有要插入的值，则无需操作textarea。如果输入中有值，请将其插入与每个元素数组中的输入占据相同位置的textarea中。

获取输入字段值数组并将其附加到关联的textarea

2 个答案: