javascript - 当改变另一个输入时如何获取上面的输入值

Question

我有两个输入，它们是时时引导时间选择器，当我更改结束时间时，我需要获取开始时间。

这里有时会在第一次和下一次单击添加新目的地时出现在一行中，这些将动态附加到第一行

在这里，当我更改“结束时间”时，我必须获取“开始时间”和“结束时间”

我已经尝试过以下

$(document).on('change','.departure_time_picker',function(){

  var departure_time  = $(this).val();
  var arrival_time    = $(this).prev().find('input.arrival_time_picker');
  console.log(arrival_time);
}); 

我的输入是

<div class="col-md-3" style="padding-left:5px;padding-right:5px;">
   <label>From Time</label>
   <div class="form-group">
      <div class="input-group bootstrap-timepicker timepicker arrival_time">
           <input name="wayPoints[0][arrival_time]" type="text" class="form-control input-small arrival_time_picker">
           <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
      </div>
   </div>
 </div>
 <div class="col-md-3" style="padding-left:5px;padding-right:5px;">
     <label>To Time</label>
     <div class="form-group">
        <div class="input-group bootstrap-timepicker timepicker departure_time">
             <input name="wayPoints[0][departure_time]" type="text" class="form-control input-small departure_time_picker">
             <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
     </div>
  </div>   

当我试图在更改“结束时间”时获取“开始时间”时，我得到“未定义”。请建议我哪里做错了。

Answer 1

使用 prev() 您将找到前一个同级元素(因此，与该元素处于同一级别)。它不会在树上搜索 parent 。所以你需要了解 jQuery 是如何工作的。

你的 DOM 树看起来像这样

col-md-3
|
|---label
|---.form-group
|  |
|  |--.input-group
|    |
|    |---.arrival_time_picker
|
|
col-md-3
|
|---label
|---.form-group
   |
   |---.input-group
     |
     |---.departure_time_picker

您可以在树上向上移动，但不能向上移动然后在兄弟内部进行搜索，至少不能仅使用一个函数，

所以首先，你需要使用

.closest('.col-md-3')

这将找到 .departure_time_picker 的父元素。
然后就可以找到上一个同级(同级)

.prev()  
/* or */
.prev('.col-md-3')

然后您可以在该元素内部查找您要查找的元素:

.find('.arrival_time_picker')

一起:

$(document).on('change','.departure_time_picker',function(){

  var departure_time  = $(this).val();
  var arrival_time    = $(this).closest('.col-md-3').prev().find('.arrival_time_picker').val();
  console.log( arrival_time );

}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3" style="padding-left:5px;padding-right:5px;">
   <label>From Time</label>
   <div class="form-group">
      <div class="input-group bootstrap-timepicker timepicker arrival_time">
           <input name="wayPoints[0][arrival_time]" type="text" class="form-control input-small arrival_time_picker">
           <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
      </div>
   </div>
 </div>
 <div class="col-md-3" style="padding-left:5px;padding-right:5px;">
     <label>To Time</label>
     <div class="form-group">
        <div class="input-group bootstrap-timepicker timepicker departure_time">
             <input name="wayPoints[0][departure_time]" type="text" class="form-control input-small departure_time_picker">
             <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
     </div>
  </div>