我有一个jQuery日期选择器控件，该控件可以很好地处理一次实例，但是我不确定如何使它适用于多个实例。
<script type="text/javascript">
$(function() {
$('#my_date').datepicker();
});
</script>
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>
如果没有For Each循环，它会很好地工作，但是如果“ MyRecords”集合中有多个项目，则只有第一个文本框会获得一个日期选择器（这与ID绑定是有意义的）。我尝试将一个类分配给文本框并指定：
$('.my_class').datepicker();
但是，尽管到处都显示一个日期选择器，但它们都更新了第一个文本框。
什么是使这项工作正确的方法？
disabled，日期选择器将不会显示具有disabled属性的输入字段
Answers:
的HTML：
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
脚本：
$('.datepick').each(function(){
$(this).datepicker();
});
（伪编码稍微简化了一点）
$(".datepick").datepicker();输入字段上的ID不同后，将无法使用吗？
onSelect事件处理程序将datepicker附加到一些HTML文本框中，我需要知道onSelect发生当前事件的选择器类名。.元素还应用了另外2个其他类，而不是我用来附加
显而易见的答案是生成不同的ID，每个文本框都有一个单独的ID，例如
[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>
我不知道ASP.net，所以我只是在方括号中添加了一些类似于C的常规语法代码。将其转换为实际的ASP.net代码应该不是问题。
然后，您必须找到一种方法来生成尽可能多的
$('#my_date[i]').datepicker();
作为您的项目Model.MyRecords。同样，方括号内是您的计数器，因此您的jQuery函数将类似于：
<script type="text/javascript">
$(function() {
$('#my_date1').datepicker();
$('#my_date2').datepicker();
$('#my_date3').datepicker();
...
});
</script>
<html>
<head>
<!-- jQuery JS Includes -->
<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>
<!-- jQuery CSS Includes -->
<link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />
<!-- Setup Datepicker -->
<script type="text/javascript"><!--
$(function() {
$('input').filter('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: 'jquery/images/calendar.gif',
buttonImageOnly: true
});
});
--></script>
</head>
<body>
<!-- Each input field needs a unique id, but all need to be datepicker -->
<p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
<p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
<p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>
</body>
</html>
有一个简单的解决方案。
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/flexcroll.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="../js/JScript.js"></script>
<title>calendar</title>
<script type="text/javascript">
$(function(){$('.dateTxt').datepicker(); });
</script>
</head>
<body>
<p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
<p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
<p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
</body>
</html>
关于SeanJA答案的一点说明。
有趣的是，如果将KnockoutJS和jQuery一起使用，则 以下输入具有不同的ID，但具有可观察到的相同数据绑定：
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />
将一个（相同的）日期选择器绑定到两个输入（即使它们具有不同的ID或名称）。
在ViewModel中使用单独的可观察对象将单独的datepicker绑定到每个输入：
<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />
初始化：
$('.datepick').each(function(){
$(this).datepicker();
});
解决方案是像许多人所说的那样使用不同的ID。问题仍然存在于日期选择器中。请更正我，但datepicker没有一个包装ID-“ ui-datepicker-div”。可以在http://jqueryui.com/demos/datepicker/#option-showOptions上看到主题背景中的。
是否有可以将此ID更改为类的选项？我不想仅仅为了这个明显的修复而叉这个脚本！
更改类而不是ID的用法
<script type="text/javascript">
$(function() {
$('.my_date1').datepicker();
$('.my_date2').datepicker();
$('.my_date3').datepicker();
...
});
</script>