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]];
    }
});

在这里，如果您愿意，这也可以帮助您使用更多输入。我没有测试过小提琴，但应该工作。

但是，如果您无权更改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开头的搜索，如果有更多的输入以这些开头但具有不同的目的，这可能会导致错误，会建议第一种方法，使用特定输入的类。

Answer 2

您可以通过以下方式更改plotMe1的值：

plotMe1[0][0]=9;

并在文本字段更改时动态更改它：

x1: <input type="text" name="x1" onkeyup="update_plotMe(this)">

然后是一个函数

function update_plotMe(o){
    if(o.name=='x1'){
        plotMe1[0][0]=o.value;
    }
}

如果你有很多图，你会想要动态读取输入字段的名称（在这个例子中为o.name）并计算图，这样你就没有一堆if / else语句

编辑：＆gt;＆gt;不使用If / Else ......

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

function update_plotMe(o){
    var char1=o.name.substr(0,1);
    var char2=o.name.substr(1,1);

    var pos1=parseInt(char2)-1;
    var pos2=(char1=='y')?(1):(0);

    plotMe1[pos1][pos2]=o.value;
}
</script>


<form>
x1: <input type="text" name="x1" onkeyup="update_plotMe(this)"/>
y1: <input type="text" name="y1" onkeyup="update_plotMe(this)"/><br/>
x2: <input type="text" name="x2" onkeyup="update_plotMe(this)"/>
y2: <input type="text" name="y2" onkeyup="update_plotMe(this)"/><br/>
x3: <input type="text" name="x3" onkeyup="update_plotMe(this)"/>
y3: <input type="text" name="y3" onkeyup="update_plotMe(this)"/><br/>
</form>

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

2 个答案: