Question

我目前正在研究JavaScript中的一些输入表单，并且我已经通过脚本进行了编辑，这样一旦用户输入问题的力的数量，每个数字都会显示新的输入文本字段，还有一个按钮在最后添加。问题是，当我尝试单击此按钮时，我尝试使用.map函数将所有文本字段值启动到其中，并且没有任何事情发生。

function forceRecording(numofforces,$this){
    var addRows='<tr id=newRows>';

    for(var i =1; i<=numofforces;i++)
    {
        var nearTr=$this.closest('tr');
        addRows=addRows + "<td>Force " +i+": </td><td><form><input type='text' name='forceItem' id='newR'/></form></td>";
    }

    addRows=addRows+"<td><div class='button' id='forceButton'> Add! </div></td></tr>";
    nearTr.after(addRows);
};

$('#forceButton').click(function(){
    forces=$("input[id='newR']").map(function(){
    return $(this).val()
});    

function forceRecording(numofforces,$this){
    var addRows='<tr id=newRows>';

    for(var i =1; i<=numofforces;i++)
    {
        var nearTr=$this.closest('tr');
        addRows=addRows + "<td>Force " +i+": </td><td><form><input type='text' name='forceItem' id='newR'/></form></td>";
    }

    addRows=addRows+"<td><div class='button' id='forceButton'> Add! </div></td></tr>";
    nearTr.after(addRows);
};

$('#forceButton').click(function(){
    forces=$("input[id='newR']").map(function(){
        return $(this).val()
    });

    prompt("forces");
});

正如您所看到的，我的forceRecording函数正在工作，并根据numofforces创建一个带有新文本输入字段的新行，但是一旦我尝试单击forceButton将值输入到我的力数组中，就没有任何反应。知道是什么原因引起的吗？

Answer 1

我完全不知道你想要达到的目标，但也许这会有所帮助：

function forceRecording(numofforces, $this) {
    var addRows = '<tr id="newRows">';
    for (var i = 1; i <= numofforces; i++)
        addRows += '<td>Force ' + i + ': </td><td><input type="text" name="forceItem" /></td>';
    addRows += '<td><input type="button" class="button" id="forceButton" value="Add!" /></td></tr>';
    $this.closest('tr').after(addRows);
}

$('#forceButton').click(function() {
    forces = $(this).parent().parent().filter('input[name="forceItem"]').map(function() { return $(this).val(); });
});

Answer 2

您错过了代码周围的关闭术语

$('#forceButton').click(function(){
    forces=$("input[id='newR']").map(function(){return $(this).val()
});

应该是这样的

$('#forceButton').click(function(){
   forces=$("input[id='newR']").map(function(){
       return $(this).val();
   });
});

不要使用id而是使用class name

$('#forceButton').click(function(){
    forces=$(".newR").map(function(){
        return $(this).val();
    });
});

将类应用于输入字段，如此

<input type="text" name="forceItem" class="newR"/>

jQuery输入表单问题

2 个答案: