Question

我有一个像下面这样的HTML代码。我想知道如何在javascript中动态识别sessionEventsDecorator [0] .startDateStr，sessionEventsDecorator [1] .startDateStr。目的是确保用户不要输入大于2013年的年份值。

&lt;input id="sessionEventsDecorator[0].startDateStr" name="sessionEventsDecorator[0].startDateStr" class="text small" onchange="formDirty();" type="text" value="Mar 05, 2013"/&rt;


&lt;input id="sessionEventsDecorator[1].startDateStr" name="sessionEventsDecorator[1].startDateStr" class="text small" onchange="formDirty();" type="text" value="Mar 05, 2013"/&rt;

Answer 1

document.getElementById("sessionEventsDecorator[0].startDateStr").value <=2013

那将为您检查。但我不认为您正在理解ID如何正常工作。 Ids不是动态的，不能作为数组使用，它们作为单个html对象的唯一标识符。

像“sessionEventDecoratorDate0”这样的东西会更正常。

如果您想要遍历所有这些并且不知道有多少，您可以通过

获取值

var counter=0;
while (true){
  var element = document.getElementById("sessionEventsDecorator["+counter+"].startDateStr");
  if(element){
   counter++;
   //do logic here on element
  }
  else{
    break;
  }
}

Answer 2

好的，根据您对Sebas回答的评论，我认为这正是您所寻找的，基于我们可以看到您的代码：

var loopIndex = 0;

while (document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr"))
{
    var inputField = document.getElementById("sessionEventsDecorator[" + loopIndex + "].startDateStr");

    . . . logic to check date . . .

    loopIndex++;
}

话虽这么说，你的div的命名约定有点令人困惑。简化ID有助于提高可读性。此外，如果您可以使用JQuery并为所有这些输入提供一个公共类，那么可以采用更简洁的方式进行迭代。

Answer 3

您应该将元素的id和name属性设置为更简单：

<input type="text" class="text small" onchange="formDirty()" name="dateDecorator0" id="dateDecorator0">

<input type="text" class="text small" onchange="formDirty()" name="dateDecorator1" id="dateDecorator1">

现在我们有一些易于使用的东西。因此，在我们的Javascript中，我们现在可以使用document.getElementById("dateDecorator"+i).value访问所有输入。但老实说，我甚至不知道为什么你要在formDirty（）函数中执行此操作时它应该看起来像这样：

function formDirty(){
    var val=this.value;
    if(val.substr(val.indexOf(",")+2) > 2013){
        this.value=val.substr(0,val.indexOf(",")+2)+"2013";
    };
}

如何在javascript中识别动态html对象？

3 个答案: