2 jQuery를 Timepickers - 구별하는 방법 (jquery.timepicker) 내가 <code>jQuery.timepicker</code> 사용하고

Question

(이 플러그인을 사용하는 방법을 널리 확실하지 -이 존 손튼, 힘내에 의해 만들어진 : https://github.com/jonthornton/jquery-timepicker 및 샘플 페이지 : http://jonthornton.github.io/jquery-timepicker/)

나는 StartTime과 EndTime이라는 두 개의 timepicker를 가지고 있는데, 이들은 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' 
}); 

하지만이 입력 필드 상에 클릭 할 때 갑자기 동일한지지 된 div 삽입 최종 HTML에서

. 내가 말할 수있는 한 그들은 위치, 신분증, 또는 학급별로 구별되지 않는다고 말할 수 있습니다.

<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에서 일부 항목을 삭제해야합니다. 다음은 잘못된 목록에서 삭제되기 때문에 작동하지 않습니다. 이 예에서는 # 1에서 선택한 시간을 # 2의 목록에서 삭제해야합니다. timepicker를 만들 때

$('#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

, 당신은 드롭 다운을 포함하는 HTML 요소를 제공하는 클래스를 지정 className: 옵션을 사용할 수 있습니다. 그래서 두 timepickers 서로 다른 클래스를 제공합니다 :

$('#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 메서드는 빈 콜렉션을 처리하는 데 문제가 없습니다).