2 jQuery 时间选择器 -- 如何区分 (jquery.timepicker)

Question

我正在使用 jQuery.timepicker（不确定这个插件的使用范围——它是由 Jon Thornton 创建的，Git：https://github.com/jonthornton/jquery-timepicker and Sample Page: http://jonthornton.github.io/jquery-timepicker/）

我创建了 2 个时间选择器，StartTime 和 EndTime，它们使用从 00:00 到 23:59 的 5 分钟间隔选项填充下拉菜单。

例如，

$('#startTime').timepicker({
      'minTime': '12:00am',
      'maxTime': '11:59pm',
      'step': '5', 
      'showDuration': 'false'
});     

$('#endTime').timepicker({
      'minTime': '12:00am',
      'maxTime': '11:59pm',
      'step': '5', 
      'showDuration': 'false'
});

但在最后 HTML 这会插入相同的支持 DIV，这些 DIV 在单击输入字段时会弹出。据我所知，它们不是按位置、ID 或 class.

区分的

<div class="ui-timepicker-wrapper" tabindex="-1" style="position: absolute; top: 230.233px; left: 345.667px; display: none;">
    <ul class="ui-timepicker-list">
       <li>12:00am</li>
       <li>12:05am</li>
       ...
</ul></div>

两者都是。有什么办法可以区分它们吗？在#1 中选择时，我需要从#2 中删除一些条目。以下不起作用，因为它从错误的列表中删除。在这个例子中，我需要从#2 的列表中删除在#1 中选择的时间。

$('#endTime').on('showTimepicker', function() {
    var current = $('.ui-timepicker-list li').filter(function() { // Exact match necessary
        return $(this)[0].childNodes[0].textContent == $('#startTime').val();
    });
    if (current.length) {
        $(current).remove();
    }
});

Answer 1

创建时间选择器时，您可以使用 className: 选项指定 class 以提供包含下拉列表的 HTML 元素。所以给两个时间选择器不同的 classes:

$('#startTime').timepicker({
      className: 'startTime',
      'minTime': '12:00am',
      'maxTime': '11:59pm',
      'step': '5', 
      'showDuration': 'false'
});     

$('#endTime').timepicker({
      className: 'endTime',
      'minTime': '12:00am',
      'maxTime': '11:59pm',
      'step': '5', 
      'showDuration': 'false'
});

$('#endTime').on('showTimepicker', function() {
    var current = $('.endTime li').filter(function() { // Exact match necessary
        return $(this).text() == $('#startTime').val();
    });
    current.remove();
});

您也不需要那些冗长的代码来获取列表项的文本，只需使用 $(this).text()。而且不需要检查 current 的长度；如果它是空的，remove() 不会做任何事情（几乎所有 jQuery 方法处理空集合都没有问题）。

2 jQuery 时间选择器 -- 如何区分 (jquery.timepicker)

2 jQuery Timepickers -- How to Distinguish (jquery.timepicker)

javascript

jquery

timepicker