Javascript QuerySelector 不适用于 for with [i]

Question

我正在尝试使用 QuerySelector 获取数据表单中每个评论的值。有一个“添加”按钮，允许显示另一个元素并将元素的名称增加 +1。例如，第一个评论的名称为“comment0”，第二个评论的名称为“comment1”，等等......

这是我尝试在其中使用 javascript 的 html:

            <li id="duplicate" class="list-group-item">
                <select name="acc<?php echo $count; ?>" class="form-control col-md-6 duplicate-select">
                    <option  value="choix">-- Choisir --</option>
                    <option class="duplicate-option" value="kitpieton">Kit piéton</option>
                    <option class="duplicate-option" value="chargeur">Chargeur</option>
                    <option class="duplicate-option" value="batterie">Batterie</option>
                    <option class="duplicate-option" value="capot">Capot batterie</option>
                    <option class="duplicate-option" value="sdcard">Carte SD</option>
                    <option class="duplicate-option" value="box">Emballage</option>
                    <option class="duplicate-option" value="autre">Autre (préciser)</option>
                </select>
                <input name="comment<?php echo $count; ?>" type="text" class="form-control duplicate-input" class="cold-md-6" placeholder="Détails"/>
                <div class="btn-group btn-toggle" data-toggle="buttons">
                    <label class="btn btn-sm btn-default">
                        <input type="radio" name="check<?php echo $count; ?>" class="btn duplicate-check" value="1">
                        <span class="glyphicon glyphicon-ok"></span>
                    </label>
                    <label class="btn btn-sm btn-primary active">
                        <input type="radio" name="check<?php echo $count; ?>" class="btn duplicate-check" value="0" checked >
                        <span class="glyphicon glyphicon-remove"></span>
                    </label>
                </div>
                <div class="clearfix"></div>
            </ul> 
            </li>   

对于 javascript，这个采用一个 name 属性的 querySelector 可以工作:

var form = document.forms[1];  
var selectElement = form.querySelector('input[name="comment0"]');
var selectedValue = selectElement.value;

alert(selectedValue);

但是在 for 中它无法识别 [i] :

var count = +$('.count').val() +1 ;
for(i=0;i<count; i++)
{

    var form = document.forms[1];  
    var selectElement = form.querySelector('input[name="comment[i]"]');
    var selectedValue = selectElement.value;
    alert(selectedValue);
}

如果您可以通过 Javascript 为我提供解决方案，我将非常感激，但我仍然愿意倾听您如何使用 JQUERY 来实现它。

我也尝试使用querySelectorAll，当我这样做时它没有显示元素的值有 3 条评论 type=text，其中 2 条有值:

var queryAll = document.querySelectorAll('#duplicate input');
var queryAllLength = queryAll.length;
alert(queryAll[1].value); // shows 1    

alert(queryAllLength); // shows 3

当我更改 var queryAll = document.querySelectorAll('#duplicate input'); 时var queryAll = document.querySelectorAll('#duplicate .duplicate-input'); ，两个警报都没有显示任何内容，但是当它是 var queryAll = document.querySelectorAll('#duplicate .form-control'); 时, queryAll 不显示任何内容，但 queryAllLength 显示 2 ...

Answer 1

更改此行:

var selectElement = form.querySelector('input[name="comment[i]"]');

致:

var selectElement = form.querySelector('input[name="comment'+i+'"]');