Question

下面是一些使用时间选择器的HTML表单代码。当我单击第一行时，时间选择器按预期执行。但是，当我尝试向第二行或后续行添加时间时，它不起作用。 onClick函数显示日历，就像在第一行中一样，但值不会返回到输入单元格。

以下代码是在循环命令中生成的，每行都分配了一个索引/唯一值。但它仍然没有正确执行。 HTML表单页面本身是用ColdFusion编写的。

<cfoutput> 
   <cfloop index="z" from="1" to="3">

    <div class="table right">
      <input type="text" id="starttime#z#" placeholder="Time">
    </div>

    <div class="table right">  
      <input type="text" id="endtime#z#" class="icon" placeholder="Time">
      <a id="link#z#"></a>
    </div>

    <script>
    var endtime#z# = document.getElementById('endtime#z#');
    var timepicker = new TimePicker(['starttime#z#', 'link#z#'], {
      lang: 'en',
      theme: 'blue-grey'
    });
    timepicker.on('change', function (evt#z#) {
      var value = (evt#z#.hour || '00') + ':' + (evt#z#.minute || '00');

      if (evt#z#.element.id === 'link#z#') {
        endtime.value = value;
      } else {
        evt#z#.element.value = value;
      }
    });

    hljs.configure({ tabReplace: '  ' });
    hljs.initHighlightingOnLoad();
    </script>

</cfloop>
</cfoutput>

Answer 1

你说这段代码是在循环中执行的。让我们假设循环使代码运行3次。这意味着这样的事情：

<input type="text" id="endtime2" placeholder="Time">

将在页面上显示3次。 JavaScript会遇到这个问题：

var endtime2 = document.getElementById('endtime2');

因为有3个元素，id = endtime2。

你这样处理：

<cfoutput>
<cfloop from = 1 to = 3 index = "idx">
<input type="text" id="endtime#idx#" placeholder="Time">
etc
var endtime#idx# = document.getElementById('endtime#idx#');
etc

需要在表单中重复（循环）的javascript表单字段

1 个答案: