jquery - jQuery - 根据按钮单击更改一个输入字段的值，然后根据下一个元素或值更改另一个字段的值

Question

这是小提琴：http: //jsfiddle.net/PfEVd/

我有以下 HTML：

<ul id="timeslots">
    <li><button>10:00 AM</button></li>
    <li><button>10:30 AM</button></li>
    <li><button>11:00 AM</button></li>
    <li><button>11:30 AM</button></li>
    <li><button>12:00 AM</button></li>
    <li><button>12:30 AM</button></li>
    <li><button>1:00 PM</button></li>
    <li><button>1:30 PM</button></li>
    <li><button>2:00 PM</button></li>
    <li><button>2:30 PM</button></li>
    <li><button>3:00 PM</button></li>
</ul>

<form>
    <input type="text" name="appointment_date[start_time]" value="1:00 am" class="time start-time" />
    &mdash;
    <input type="text" name="appointment_date[end_time]" value="1:30 am" class="time end-time" />
</form>

和下面的jQuery：

$("#timeslots li button").click(function () {
      var text = $(this).text();
      $("input:text[name='appointment_date[start_time]']").val(text);
});

我需要弄清楚的是如何同时将“appointment_date[end_time]”的值更改为下一个时间段的开始时间。换句话说，如果您单击“上午 10:00”按钮，则 start_time 更改为上午 10:00，而 end_time 同时更改为上午 10:30。我该怎么做？

提前致谢！

Answer 1

所以你想要父母的下一个兄弟姐妹的孩子的文本。

jsFiddle

$("#timeslots li button").click(function () {
    var text = $(this).text();
    $("input:text[name='appointment_date[start_time]']").val(text);

    // Get parent's next sibling's child's text
    var toText = $(this).parent().next().children('button').text()
    $("input:text[name='appointment_date[end_time]']").val(toText);
});

这不适用于最后一个按钮，因为没有下一个按钮。您最好制作一个函数来获取当前按钮的时间并将其添加 30 分钟。原谅凌乱的代码，但你明白了:)

jsFiddle

$("#timeslots li button").click(function () {
    var text = $(this).text();
    $("input:text[name='appointment_date[start_time]']").val(text);

    var toText = addThirtyMinutes(text);
    $("input:text[name='appointment_date[end_time]']").val(toText);
});

function addThirtyMinutes(time) {
    var timeSplit = time.split(' ');
    var hourAndMin = timeSplit[0].split(':');
    hourAndMin[0] = Math.floor(parseInt(hourAndMin[0], 10) + ((parseInt(hourAndMin[1], 10) + 30) / 60));
    if (hourAndMin[0] == 13) {
        hourAndMin[0] = 1;
        timeSplit[1] = 'PM';
    }
    hourAndMin[1] = (parseInt(hourAndMin[1], 10) + 30) % 60;

    return hourAndMin[0] + ':' + (hourAndMin[1] < 10 ? '0' : '') + hourAndMin[1] + ' ' + timeSplit[1];
}

Answer 2

jsFiddle 演示

这是我将如何处理这个问题。单击时获取下一个按钮的文本。如果是最后一个，则在 30 分钟窗口内进行硬编码。

var all = $("#timeslots li button").length;
var $buttons = $("#timeslots li button");
$buttons.click(function () {
 var text = $(this).text();
 $(".start-time").val(text);
 var next = $buttons.index(this) + 1;
 if( next == all ){
  $(".end-time").val("3:30 PM");   
 }else{
  $(".end-time").val($buttons.eq(next).text());   
 }
});