如何为每个输入字段分配索引

时间:2012-10-10 14:32:17

标签: javascript jquery html textbox

对,所以这个问题可能没有说明我想说的是什么,但这就是我想要实现的目标。我在一个页面上有6个文本框,每个文本框包含一个0到500之间的数字(没有限制,但我不希望数字高于此数字)。这个数字取决于其他地方的计算,但与此问题无关,所以我把它排除在外。无论如何,我想要做的是;

根据scoreone, scoretwo等中的值的大小,在代码中的1到10之间的代码中运行循环并分配新的文本框indexone, indextwo等。

例如,如果indexone包含15,则文本框scoreone将填充0.现在这样可以正常工作,但仅适用于一个文本框,因为我有六个,我不知道如何为所有人(即一个接一个)做这个。我正在使用JavaScript和jQuery ......

HTML:

<input type="text" disabled="disabled" value="20" id="indexone" />
<input type="text" disabled="disabled" value="0" id="scoreone" /><br>


<input type="text" disabled="disabled" value="60" id="indextwo" />
<input type="text" disabled="disabled" value="0" id="scoretwo" /><br>


<input type="text" disabled="disabled" value="100" id="indexthree"/>
<input type="text" disabled="disabled" value="0" id="scorethree" /><br>


<input type="text" disabled="disabled" value="160" id="indexfour"/>
<input type="text" disabled="disabled" value="0" id="scorefoure" /><br>

<input type="text" disabled="disabled" value="180" id="indexfive"/>
<input type="text" disabled="disabled" value="0" id="scorefive" /><br>


<input type="text" disabled="disabled" value="210" id="indexsix"/>
<input type="text" disabled="disabled" value="0" id="scoresix" /><br>

JS:

var indexArray = [indexone, indextwo, indexthree, indexfour, indexfive, indexsix];

for (var i = 0; i < indexArray.length; i++) {
    if ((indexArray[i] >= 0) && (indexArray[i] < 25)) {
        scoreone = parseInt(1);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 25) && (indexArray[i] < 50)) {
        scoreone = parseInt(2);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 50) && (indexArray[i] < 75)) {
        scoreone = parseInt(3);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 75) && (indexArray[i] < 100)) {
        scoreone = parseInt(4);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 100) && (indexArray[i] < 125)) {
        scoreone = parseInt(5);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 125) && (indexArray[i] < 150)) {
        scoreone = parseInt(6);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 150) && (indexArray[i] < 175)) {
        scoreone = parseInt(7);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 175) && (indexArray[i] < 200)) {
        scoreone = parseInt(8);
        $('#scoreone').val(scoreone);
    }
    else if ((indexArray[i] >= 200) && (indexArray[i] <= 225)) {
        scoreone = parseInt(9);
        $('#scoreone').val(scoreone);
    }
    else if (indexArray[i] > 225) {
        scoreone = parseInt(10);
        $('#scoreone').val(scoreone);
    }

}

我已经把我正在尝试做的事情放在一个小提琴here中......

4 个答案:

答案 0 :(得分:1)

只需使用类并循环遍历

<强> HTML

<input type="text" disabled="disabled" value="20" class="index" />
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="60" class="index" />
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="100" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="160" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>

<input type="text" disabled="disabled" value="180" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>


<input type="text" disabled="disabled" value="210" class="index"/>
<input type="text" disabled="disabled" value="0" class="score" /><br>​

<强>的JavaScript

//That whole if/else if statement reduced to a calculation
function getValue(val){
    var number = (Math.round(val/100*4)/4)*100/25;
    if (number>10) {
        number = 10;
    }        
    return number;
}

//Find all of the indexes and scores, returned in document order
var indexes = $(".index");
var scores = $(".score");

//loop through indexes and set the value on the corresponding score
indexes.each(function(ind) {
    var index = jQuery(this);
    var score = scores.eq(ind);
    var value = getValue(index.val());
    score.val(value);
});

Running example

答案 1 :(得分:1)

试试这个工作示例,改变了单词的内容:

jsfiddle

答案 2 :(得分:0)

答案 3 :(得分:0)

希望这会简化:

更新字段的ID以使用索引编号作为后缀score1score2 ..和index1index2 ...

然后编写一个紧凑的java函数,如下所示:

 for (var i = 1; i <= 6; i++) {
    $('#score'+i).val(Math.ceil($('#index'+i).val()/25));
  }

如果您不想更改ID,我认为以下内容应该有效。

var indexArray = [indexone, indextwo, indexthree, indexfour, indexfive, indexsix];
var scoreArray = [scoreone, scoretwo, scorethree, scorefour, scorefive, scoresix];

 for (var i = 0; i < indexArray.length; i++) {
    $('#'+scoreArray[i]).val(Math.ceil($('#'+indexArray[i]).val()/25));
  }