在 keyup 上分别将时间差绑定到每个元素

Question

结果

感谢你们（@timmyRS 和@LTasty）的帮助。

我正在创建一堆在航班起飞前发生的交通接送。

航班起飞时间
分钟：航班起飞前上车的分钟数
接机时间 = 航班起飞时间 - 分钟

出发时间仍然存在，用于根据之前的分钟数指示上车时间。

我的出发点是；

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

添加取件link 通过附加来添加额外的取件时间。

我的问题

我想为每个添加的取件点单独更新取件时间。

我计算的时间是正确的，但它们都是一起更新的。正如您在下面的屏幕截图中所见。第一个取件时间是正确的（上午 10 点前 20 分钟 = 9:40 上午）但它也更改了第二个取件时间，应该是 9:30 上午。

请看FIDDLE

谢谢。

Answer 1

您的错误很容易发现，因为您实际上只是从第一个 .pickup-minutes 元素计算并将其放入每个 .pickup-time 元素。使用一个简单的 each 函数就解决了我的问题：

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

此外：我将减法方法更改为 substract(minutes, 'minutes')，因为它在旧方法中已被弃用。

Answer 2

我拆分了处理程序，因为当您更改时间时，您需要每个输入都存在

$(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/

在 keyup 上分别将时间差绑定到每个元素

Binding time difference to each element individually on keyup

jquery

jsfiddle

momentjs