Question

我正在使用bootstrap time-picker，我想将它用于任意数量的文本字段，从1到任意数字，因为它依赖于成员。我正在粘贴下面的代码，目前我添加了“1”，因此它仅用于一个文本字段，但如果成员需要多个文本字段来显示时间...我可以这样做吗？

var counterAvailabilityN = 1;

$('#es_availability_time_from' + counterAvailabilityN).timepicker();
setTimeout(function() {
  $('#timeDisplay').text($('#es_availability_time_from' + counterAvailabilityN).val());
}, 100);

$('#es_availability_time_from' + counterAvailabilityN).on('changeTime.timepicker', function(e) {
  $('#timeDisplay').text(e.time.value);
});


$('#es_availability_time_untill' + counterAvailabilityN).timepicker();
setTimeout(function() {
  $('#timeDisplay').text($('#es_availability_time_untill' + counterAvailabilityN).val());
}, 100);

$('#es_availability_time_untill' + counterAvailabilityN).on('changeTime.timepicker', function(e) {
  $('#timeDisplay').text(e.time.value);
});

基本上我是从数据库中检索“从”到“直到”的数据，所以有时会有3个文本字段，有时会有5个文本字段，所以我不确定有多少文本字段来自哪个成员，如果是3，我需要在每个文本字段中添加3次时间选择器，如果是5，我想添加5次时间选择器，如你所见，我将其修复为1，我只是想要在页面加载时，它应该读取有多少，并且基于每个文本字段中的添加时间选择器，每个文本字段具有不同的ID，从1到任何数字。

Answer 1

以下是使用事件委派的示例，它显然没有使用boostrap timepicker，但它也适用于此。

这个例子非常基础，易于理解。无论你输入INPUT的是什么，都会被复制到INPUT。

我已经使用了三个类来定位正确的元素。

我还使用jQuery clone方法制作多个元素副本，而不是用HTML手工编写所有元素。

＆＃13;

$(function () {
  var clone = $('#clone'), body = $('body');
  for (var l = 1; l < 10; l ++) {
    var cloned = clone.clone();
    cloned.removeClass('hidden');
    cloned.appendTo(body);
  }
  
  body.on('input propertychange', '.from', function () {
    var copyTo = $(this).parents('.fromto').find('.to');
    copyTo.val($(this).val());
  });
});

＆＃13;

.hidden {
  display: none;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- create a clone, make it's easy to create multiple ones -->
<div id="clone" class="fromto hidden">
  from <input class="from" />
  to <input class="to" />
</div>

＆＃13;

如何增加var数

1 个答案: