Bindungszeitdifferenz zu jedem Element einzeln auf keyup

Question

Das Ergebnis

Danke beide (@timmyRS und @LTasty) für die Unterstützung aus.

ich ein paar Transport Pickups erschaffe, die auftreten, bevor ein Flug startet.

1. Flugabfahrtszeit
2. Minuten: Anzahl der Minuten, die Abholung erfolgt, bevor Flug
3. Pickup Time = Abflugzeit Fährt - Minuten

Die Zeit Abfahrt bleibt und wird verwendet, um die Abholzeit basierend auf der Anzahl der Minuten vorher anzuzeigen.

Mein Ausgangspunkt ist;

<label>Flight Departs</label> 
<input type="text" class="tour-time" value="10 AM" /> 
<hr /> 
<div class="pickups"> 
    <div><label>Pickup Time <span class="pickup-time"></span></label> 
    <input type="text" class="pickup-minutes" placeholder="number of minutes before flight departs" /> 
    </div> 
</div> 
<a href="#" class="add-pickup">Add Pickup</a> 

Das Add Pickup Link fügt zusätzliche Abholzeiten durch Anhängen.

Mein Problem

Ich möchte die Abholzeit individuell für jeden Pickup aktualisieren Punkt hinzugefügt.

Ich habe die Zeiten richtig berechnet aber sie alle aktualisieren sich zusammen. Wie Sie im folgenden Screenshot sehen können. Die erste Abholzeit ist korrekt (20 Minuten vor 10 Uhr = 9:40 Uhr), aber es ändert sich auch die zweite Abholzeit, die 9:30 Uhr sein sollte.

Bitte sehen FIDDLE

Danke.

Answer 1

Ihr Fehler war sehr einfach zu erkennen, da Sie in der Tat nur aus dem ersten .pickup-minutes Element berechnen und es in jedem .pickup-time Element setzen. eine einfache each Funktion hat das Thema für mich festgelegt:

$(document).on('keyup', '.tour-time, .pickup-minutes', function() 
{ 
    $(".pickups").children().each(function() 
    { 
     console.log(this); 
     var tourtime = $('.tour-time').val(); 
     var minutes = $(this).find('.pickup-minutes').val(); 
     ctime = moment(tourtime, 'h:mm A').subtract(minutes, 'minutes').format('h:mm A'); 
     $(this).find('.pickup-time').html(ctime); 
    }); 
}); 

auch: Ich habe die subtrahieren Methode substract(minutes, 'minutes'), wie es in der alten Weise aufgegeben.

Answer 2

I gespalten Handler, weil, wenn Sie Stunden ändern Sie

anwesend jeder alle Eingaben müssen

$(document).on('keyup', '.tour-time', function(e) { 
     var tourtime = $(this).val(); 
     $(".pickups div").each(function(){ 
     var minutes = $(this).children(".pickup-minutes").val(); 
     ctime = moment(tourtime, 'h:mm A').subtract(minutes, 'minutes').format('h:mm A'); 
     $(this).find('.pickup-time').html(ctime); 
     }); 

}); 
$("body").on("keyup",".pickup-minutes",function(){ 
     var tourtime = $('.tour-time').val(); 
     var minutes = $(this).val(); 
     ctime = moment(tourtime, 'h:mm A').subtract(minutes, 'minutes').format('h:mm A'); 
     $(this).parent().find('.pickup-time').html(ctime); 
}); 

https://jsfiddle.net/u5hL9Lar/29/