Question

我正在使用jQuery.timepicker（不确定这个插件的使用范围有多广 - 它是由Jon Thornton创建的，Git：https://github.com/jonthornton/jquery-timepicker和示例页面：http://jonthornton.github.io/jquery-timepicker/）

我有两个我创建的时间戳，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 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方法都没有处理空集合的问题）。

2 jQuery Timepickers - 如何区分（jquery.timepicker）

1 个答案: