1

これがフィドルです：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 AM」ボタンをクリックすると、start_time が 10:00 AM に変わり、同時に end_time が 10:30 AM に変わります。どうすればいいですか？

前もって感謝します！

4

2 に答える 2

1

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());   
 }
});
于 2013-04-06T06:21:24.773 に答える
1

したがって、親の次の兄弟の子のテキストが必要です。

jsフィドル

$("#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 分を追加する関数を作成する方がよい場合があります。乱雑なコードを許してください、しかし、あなたはアイデアを得る:)

jsフィドル

$("#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];
}
于 2013-04-06T06:11:21.753 に答える