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から任意の数まで、異なるIDを持っています。

Answer 1

ここでは、イベントデリゲーションの使用例を示しますが、これは明らかにブーストラップタイムピッカーを使用していませんが、これも有効です。

例はわかりやすいように非常に基本的です。 INPUTから入力したものは、INPUTにコピーされます。

私は正しい要素を対象とするために3つのクラスを使用しました。

また、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>