生成用于处理的html输入的循环

Question

我正在尝试使用html输入字段来控制草图。 现在，我想进行一个循环以生成一个以上的输入。

 var uivars = { tA: "40", // set initial values tB: "10", }; 

然后，我在草图中引用这些变量：

 <script type="application/processing" data-processing-target="pjs"> void draw() { background(255); var a = uivars.tA; var b = uivars.tB; line(0,b,a,b); } </script> 

然后，从输入字段中获取值，并在开始时更新uivar变量：

 <script type="text/javascript" > $(document).ready(function(){ $("#word_textboxA").keyup(function () { // whenever text is entered into input box... uivars.tA = $(this).val(); // update word variable, }); $("#word_textboxB").keyup(function () { // whenever text is entered into input box... uivars.tB = $(this).val(); }); $("#word_textboxA").val(uivars.tA); // initialize input textbox contents. $("#word_textboxB").val(uivars.tB); // initialize input textbox contents. }); </script> 

和输入：

 <div id="PVarray"> <input type="text" id="word_textboxA"/><br/> <input type="text" id="word_textboxB"/> <div/> 

我正在使用处理js构建草图，并且将有40多个输入。 因此，我正在寻找一种使这些步骤循环的方法。

不，我设法生成了一些输入字段，将其放置在某处：

 <!-- <script> window.onload = initAll; function initAll(){ for(var i = 0; i<=1; i++) { var c=document.getElementById('PVarray'); var input = document.createElement('input'); input.setAttribute('type','text'); input.setAttribute('size','1'); input.setAttribute('id','num'+(i+1)); input.setAttribute('value', 'id' ); //Adds first input to container c.appendChild(input); input = ''; } document.getElementById("show").innerHTML = uivars.tA; } </script> --> 

但是我只是找不到在jQuery部分中引用html输入的更改ID的方法。 我不是一个经验丰富的程序员。 我环顾四周以找到答案，但这对我来说只是一个困难的答案。 我的草图将需要40多个输入。 循环应只生成html输入，设置初始变量，在inputchange上更新变量并将值提供给草图。 输入的名称和初始值可以放在数组中。

Answer 1

如果我理解正确，则解决方案非常简单。

您用“ jQuery”标记了该问题，因此这是一个jQuery解决方案。

$(document).ready(function () {
    //This is the keyup event handler, attached below to all <input> elements
    function updateUivars() {
        uivars[this.id] = this.value;
    }

    //a jQuery-wrapped reference to the PVarray container
    var $c = $('#PVarray');

    //Loop through uivars properties to create <input> elements with :
    // - id equal to the property (the key)
    // - an initial value equal to uivars[key]
    $.each(uivars, function(key, value) {
        $('<input type="text" size="1" />').attr('id', key).val(value).appendTo($c).on('keyup', updateUivars);
    });
});

编辑

因此，现在，对于每个univars属性，都有一个值和两段关联的文本。

var uivars = {
    Ins: [30, "Insulation", "kWh/m2/day"],
    D:   [40, "Deterioration", "%"], 
    AO:  [10, "Azimuth Offset", "%"],
    SD:  [20, "Surface Deposits", "%"],
    TC:  [30, "Temperature", "DegC"]
};

显然需要修改创建输入元素的循环，以使关联的文本得以显示。

可能不太清楚，是否还需要修改keyup事件处理程序以将值存储回适当数组的元素[0]中。

这样的事情应该做到：

$(document).ready(function () {
    //This is the keyup event handler, attached below to all <input> elements
    function updateUivars() {
        uivars[this.id][0] = this.value;
    }

    //a jQuery-wrapped reference to the PVarray container
    var $c = $('#PVarray');

    //Loop through uivars properties to create an inner div containing:
    // - a label for the property's name
    // - an <input> elements with :
    //   * id equal to the property (the key)
    //   * an initial value equal to uivars[key][0]
    // - a label for the property's units
    $.each(uivars, function(key, arr) {
        var $div = $('<div class="property"/>').appendTo($c);//inner block element
        $('<label/>').text(arr[1]).appendTo($div);
        $('<input type="text" size="3" />').attr('id', key).val(arr[0]).appendTo($div).on('keyup', updateUivars);
        $('<label/>').text(arr[2]).appendTo($div);
    });
});

如果需要，可以使用.property {...}指令在CSS中设置内部div的样式。