javascript - 在 foreach 循环中创建具有唯一 ID 的输入字段`

Question

我有一个 php foreach 循环，它在模式中成功创建多个部分，每个部分都有自己的日期时间选择器。

我将 datetimepicker 更改为使用类而不是依赖 ID(我知道按原样使用 ID，foreach 循环为每个 datetimepicker 提供相同的 ID)

但是，现在，日历弹出窗口没有出现，但是当我点击日历按钮时，它会用今天的日期/时间填充所有日期选择器字段。

我需要解决这个问题，或者找到一种方法来正确地迭代循环，为每个日期时间选择器提供自己的唯一 ID 并将其应用到脚本。

非常感谢任何帮助

<?php foreach($v as $k=>$n): ?>
<!--Body of the Modal for expired displays-->
<br>
<h6><?php echo $n['Type'] ?></h6>
<h6>Date/Time Expiring: <?php echo $n["Expiration"] ?></h6>
<h6>Set New Expiration:</h6><!--  <input data-date-format="mm/dd/yyyy" id="datepicker" name="datepicker"> -->
  <div class="form-group">
    <div class="datepick input-group date" id="datetimepicker1" data-target-input="nearest">
      <input type="text" class="form-control datetimepicker-input" data-target=".datepick"/>
      <span class="input-group-addon" data-target=".datepick" data-toggle="datetimepicker">
          <span class="fa fa-calendar"></span>
      </span>
    </div>
  </div>                 
<a href="#" style="float:left;">View Display</a>
<br>
<hr>
<?php endforeach; ?>

<script type="text/javascript">
$(function () {
    $('.datepick').each(function(){
      $(this).datetimepicker({
       icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
    });
    });
});
</script>

更新的代码:

<div class="form-group">
   <div class="datepick input-group date" id="datetimepicker<?php echo $k; ?>" data-target-input="nearest">
   <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker<?php echo $k; ?>"/>
   <span class="input-group-addon" data-target="#datetimepicker<?php echo $k; ?>" data-toggle="datetimepicker">
   <span class="fa fa-calendar"></span>
  </span>
 </div>
</div>  

<script type="text/javascript">
$(function () {
$('.datepick').each(function(){
  $(this).datetimepicker({
   icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            }
});
});
});
</script>

Answer 1

您正在使用data-target=".datepick"，因此任何单个日期选择器都将具有该类的所有元素的目标。

我会回滚到唯一 ID。只需使用数组元素的键($k)作为唯一标识符即可。像这样的东西:

<div class="datepick input-group date" id="datetimepicker<?php echo $k; ?>" ...>