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

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

用于为processingjs生成html输入的循环

1 个答案:

修改