javascript - 使用文本框中的值更新 javascript 数组的值

Question

我正在尝试使用 JavaScript 使用文本框中的值来更新数组“plotMe”的值。使用 pop() 可能会有所帮助，但不确定我是否需要类似的 for 语句 for (var i=0; i<array.length; i++){ do something here? };我只是不知道该怎么做。任何帮助将不胜感激。

var plotMe1= [[1,2], [3,4], [5,6]];

<form>
x1: <input type="text" name="x1"/>
y1: <input type="text" name="y1"/><br/>
x2: <input type="text" name="x2"/>
y2: <input type="text" name="y2"/><br/>
x3: <input type="text" name="x3"/>
y3: <input type="text" name="y3"/><br/>
</form>

Answer 1

如果你可以稍微改变一下 HTML，试试这个 -

var plotMe1= [[1,2], [3,4], [5,6]];

<form>
x1: <input type="text" class="x" name="x1"/>
y1: <input type="text" class="y" name="y1"/><br/>
x2: <input type="text" class="x" name="x2"/>
y2: <input type="text" class="y" name="y2"/><br/>
x3: <input type="text" class="x" name="x3"/>
y3: <input type="text" class="y" name="y3"/><br/>
</form>

我使用的是 jQuery，所以代码是 -

$("input").on('keyup', function(){
    var x = $.map($("input.x").toArray(), function(e){
         return $(e).val();
    });
    var y = $.map($("input.y").toArray(), function(e){
         return $(e).val();
    });
    plotMe1 = [];
    for(var i = 0; i < x.length; i++){
         plotMe1[i] = [x[i], y[i]];
    }
});

给你，如果你愿意的话，这也将帮助你使用更多的输入。我还没有在 fiddle 上进行过测试，但应该可以。

但是如果您无法随意更改 HTML，请尝试以下代码 -

$("input").on('keyup', function(){
        var x = $.map($("input[name^='x']").toArray(), function(e){
             return $(e).val();
        });
        var y = $.map($("input[name^='y']").toArray(), function(e){
             return $(e).val();
        });
        plotMe1 = [];
        for(var i = 0; i < x.length; i++){
             plotMe1[i] = [x[i], y[i]];
        }
    });

我个人不喜欢第二种方法，因为如果搜索的名称以x或y开头，那么如果有更多以这些开头的输入，可能会导致错误但有不同的目的，我建议第一种方法，使用特定输入的类。