javascript - 2 jQuery Timepickers -- 如何区分 (jquery.timepicker)

Question

我正在使用 jQuery.timepicker(不确定这个插件的使用范围——它是由 Jon Thornton 创建的，Git:https://github.com/jonthornton/jquery-timepicker 和示例页面: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 或等级来区分。

<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: 选项指定一个类来提供包含下拉列表的HTML 元素。所以给两个时间选择器不同的类:

$('#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 方法在处理空集合时都没有问题)。