[英]2 jQuery Timepickers — How to Distinguish (jquery.timepicker)
I'm using jQuery.timepicker
(not sure how widely this plugin is used -- it was created by Jon Thornton, Git: https://github.com/jonthornton/jquery-timepicker and Sample Page: http://jonthornton.github.io/jquery-timepicker/ ) 我正在使用
jQuery.timepicker
(不确定这个插件的使用范围有多广 - 它是由Jon Thornton,Git创建的: https : //github.com/jonthornton/jquery-timepicker和示例页面: http:// jonthornton。 github.io/jquery-timepicker/ )
I have 2 timepickers that I've created, StartTime and EndTime, which populate dropdowns with 5-min.-interval choices from 00:00 to 23:59. 我有2个我创建的时间戳,StartTime和EndTime,它们从00:00到23:59以5分钟的间隔选择填充下拉列表。
eg, 例如,
$('#startTime').timepicker({
'minTime': '12:00am',
'maxTime': '11:59pm',
'step': '5',
'showDuration': 'false'
});
$('#endTime').timepicker({
'minTime': '12:00am',
'maxTime': '11:59pm',
'step': '5',
'showDuration': 'false'
});
But in the final HTML this inserts identical supporting DIVs that pop up when clicking on an input field. 但是在最终的HTML中,这会插入在单击输入字段时弹出的相同支持DIV。 As far as I can tell they're not distinguished by position, ID, or 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>
for both. 对彼此而言。 Is there any way I could distinguish them?
有什么方法可以区分它们吗? I need to delete some entries from #2 upon selection in #1.
我需要在#1中选择时删除#2中的一些条目。 The following doesn't work because it deletes from the wrong list.
以下操作无效,因为它从错误的列表中删除。 In this example, I need to delete from #2's list the time selected in #1.
在这个例子中,我需要从#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();
}
});
When creating the timepicker, you can use the className:
option to specify a class to give the HTML element containing the dropdown. 创建时间选择器时,可以使用
className:
选项指定一个类,以便为包含下拉列表的HTML元素提供支持。 So give the two timepickers different 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();
});
You also don't need that verbose code to get the text of the list item, just use $(this).text()
. 您也不需要那个详细的代码来获取列表项的文本,只需使用
$(this).text()
。 And there's no need to check the length of current
; 而且无需检查
current
长度; if it's empty, remove()
won't do anything (almost all jQuery methods have no problem processing empty collections). 如果它是空的,
remove()
将不会做任何事情(几乎所有的jQuery方法都没有处理空集合的问题)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.