Question

我有一个jquery日历，其中有js文件存储在日历文件夹中。当我选择日期时，日期被插入文本框。它工作正常。但我有另一个文本框，我想使用相同的脚本也是那个盒子的功能。我是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有关，但我不知道如何解决这个问题。提前谢谢。

Answer 1

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

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

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

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

Answer 2

而不是id，你可以使用css类试试这段代码

＆＃13;

<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>

＆＃13;

Answer 3

将相同的css类分配给这两个文本框，并使用class selector调用attach datepicker。例如：

<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

如果您不想为所有

使用相同的课程，您可以使用

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

或

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

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

多个控件使用相同的JavaScript

4 个答案: