Question

我有两个输入，那些是时间和时间的自举时间选择器，当我改变结束时间时我需要得到开始时间。

这里时间和时间将在第一次出现在一行中，然后在点击添加新目的地时将动态附加到第一行

在这里，当我改变To To时，我必须得到From Time to To Time

我在下面试过

$(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()，您将找到上一个兄弟（因此，与该元素处于同一级别）。它不会为父母搜索树。所以你需要了解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')

所有在一起：

＆＃13;

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

＆＃13;

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

＆＃13;

更改其他输入时如何获取上述输入值

1 个答案: