使用相同的多个控件 javascript

Question

我有一个 jquery 日历，其中有 js 文件存储在日历 folder.When 我 select 日期，日期被插入 textbox.It 正在工作 fine.But 我有另一个文本框，我想对该框使用相同的脚本和函数 too.I 是 jquery 的新手，所以帮我解决这个问题。这是脚本：

 <head>
 <meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
 <script>
     $(function () {
         $("#datepicker").datepicker();
     });
 </script>
 </head>
 <body>
 <tr>
  <td class="unmaintable1">Registeration starts : </td>
  <td class="unmaintable2"><input type="text" id="datepicker"/></td>
  <td class="unmaintable3">Registeration ends : 
  <input type="text" id="datepicker0"/></td>
  <td class="unmaintable4">&nbsp;</td>
 </tr>

我知道这个跟id有关系，但是我不知道怎么提前解决this.Thanks

Answer 1

$("#datepicker, #datepicker0").datepicker();

或者您可以为两个元素指定相同的 class 名称并使用：

<input type="text" id="datepicker" class="datepicker"/>
<input type="text" id="datepicker0" class="datepicker"/>

$(".datepicker").datepicker();

Answer 2

您可以使用 css class 而不是 id 试试这个代码

<head>
 <meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
 <script>
     $(function () {
         $(".datepicker").datepicker();
     });
 </script>
 </head>
 <body>
 <tr>
  <td class="unmaintable1">Registeration starts : </td>
  <td class="unmaintable2"><input type="text" class="datepicker" id="datepicker"/></td>
  <td class="unmaintable3">Registeration ends : 
  <input type="text" class="datepicker" id="datepicker0"/></td>
  <td class="unmaintable4">&nbsp;</td>
 </tr>

Answer 3

将相同的 css class 分配给这两个文本框并使用 class selector 调用附加日期选择器。示例：

<head>
 <meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
 <script>
     $(function () {
         $(".date-picker").datepicker();
     });
 </script>
 </head>
 <body>
 <tr>
  <td class="unmaintable1">Registeration starts : </td>
  <td class="unmaintable2"><input class="date-picker" type="text" id="datepicker"/></td>
  <td class="unmaintable3">Registeration ends : 
  <input class="date-picker" type="text" id="datepicker0"/></td>
  <td class="unmaintable4">&nbsp;</td>
 </tr>

Answer 4

如果你不想对所有人都使用相同的 class，你可以使用 like

 $("input[id^=datepicker]").datepicker();

或

<input type="text" id="datepicker" name="datepicker"/>
<input type="text" id="datepicker0" name="datepicker0"/>

$(function() {
  $("input[name^=datepicker]").datepicker();
});

使用相同的多个控件 javascript

Multiple controls using the same javascript

javascript

jquery

calendar