使用文本框中的值更新 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]];
    }
});

给你，如果你愿意，这也将帮助你使用更多的输入。我还没有测试过小提琴，但应该可以。

但是，如果您不能随意更改 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 语句

编辑：>> 不使用 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>