两个相同的小部件使用 jquery

Question

我是 JQuery 的新手，但我想知道是否有人可以帮助我解决这个问题：

考虑到您需要使用 jquery ui 在 html 页面中有 2 个带日期选择器的文本框。据我所知，jquery 是基于 "ID" 而不是 "Class"。所以我不能使用这个：

<input type="text" name="dates2" class="datepicker">   --> DOESN'T WORK! 
<input type="text" name="dates3" class="datepicker">   --> DOESN'T WORK!

如果我想使用 ID，只有第一个日期选择器文本框有效。同理：

<input type="text" name="dates2" id="datepicker">   -> WORKS!
<input type="text" name="dates2" id="datepicker">   -> DOESN'T WORK!

显然每个ID都应该是唯一的。然而我的问题是如此原始但是有没有可能在这里有两个日期选择器（或滑块或另一个小部件）？如果答案是肯定的，那么请帮助我如何通过 JQueryUI?

谢谢。

Answer 1

ID 应该是唯一的。 Jquery id 选择器将根据条件获取第一个项目，这就是第二个元素不受影响的原因。我可以建议在元素上应用 class。

<input type="text" name="dates2" class="datepicker">   
<input type="text" name="dates3" class="datepicker">

然后在 jquery 中使用 class 选择器而不是 id 选择器。

 <script>
   $(function() {
       $( ".datepicker" ).datepicker(); // class selector
   });
</script>

Two same widget using jquery