Question

我有以下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 Demo

以下是我将如何处理这个问题。单击时抓取下一个按钮的文本。如果它是最后一个，则在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());   
 }
});

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

2 个答案: