javascript - 必须在 HTML 中手动定义日期选择器的数量

Question

所以我的 Grails 应用程序中有一个工作表单，其中有 4 个 <td><g:textField id="datepicker" .../></td> 实例但我必须手动将 id 定义为

...
<td><g:textField id="datepicker1" .../></td>
...
<td><g:textField id="datepicker2" .../></td>
...
<td><g:textField id="datepicker3" .../></td>
...
<td><g:textField id="datepicker4" .../></td>
...

HTML 的头部(在我的 GSP 中)包含

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
  $(function() {
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
    $("#datepicker4").datepicker();
  });
</script>

有没有一种方法可以做到这一点，我不必预先定义页面上有多少个日期选择器，分配 datepicker#对于每个，无论我单击哪个日期文本框，它都会弹出日历？

只做一个#datepicker在头脑中并尝试使用 <td><g:textField id="datepicker" .../></td>目前在每个上都不起作用。

Answer 1

添加类或数据属性来标识元素，而不是传递 ID

<td><g:textField class="datepicker" .../></td>
<td><g:textField class="datepicker" .../></td>

或

<td><g:textField data-datepicker .../></td>
<td><g:textField data-datepicker .../></td>

然后

<script type="text/javascript">
    $(function() {
        $(".datepicker").datepicker(); //searchs all elements with class datepicker

        //or

        $("[data-datepicker]").datepicker(); //searchs for all elements with attribute data-datepicker
    });
</script>