Как увеличить номер var

Question

Я использую сборщик бутстрапов, я хочу использовать его для любого количества текстового поля, от 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, я просто хочу на загрузку страницы, он должен прочитать, сколько там и на основе этого добавить сборщик времени в каждом текстовом поле, каждое текстовое поле имеет разные идентификаторы, от 1 до любого числа.

Answer 1

Вот пример использования делегирования событий, это явно не используется с использованием ускорителя timepicker, но это тоже сработает.

Пример очень простой, чтобы сделать его легким. Все, что вы вводите в INPUT, просто копируется в INPUT.

Я использовал три класса для ориентации на правильные элементы.

Я также использовал метод клонирования jQuery для создания нескольких копий элементов, а не для кодирования всего кода в HTML.

$(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()); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<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>