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 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方法都沒有處理空集合的問題）。