使用javascript时如何在html中使用多个id答案

【问题标题】：how to use multiple id in html while using javascript使用javascript时如何在html中使用多个id
【发布时间】：2012-03-13 18:23:27
【问题描述】：

<html>
<head>
<script language="JavaScript" src="ts_picker.js">


</script>
<script src="demo/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="demo/js/jquery.datePicker-min.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="demo/js/jquery.bgiframe.min.js"></script><![endif]-->

<script type="text/javascript">
  $(window).ready(function(){
  $('#date-pick').datePicker({clickInput:true});
 $('#date-pick1').datePicker({clickInput:true});
 $('#date-pick2').datePicker({clickInput:true});
});
</script>

</head>
<body>
<form name="tstest">

<input type="Text" name="timestamp" value="" id="data-pick">

<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</a>
</form>
</body>
</html>

hai 在此使用文本框时，它可以正确获取日期，但是如果我使用两个 id，我想使用不同的 id 为同一个文本框调用其他一些 javascript，它不能正常工作，任何人都可以帮助我解决这个问题

【问题讨论】：

不要使用内联javascript。告诉你自己优雅的降级和不显眼的 javascript。
哪个id？您的代码没有/引用任何id。
我认为你的 id 有错别字......你有 $('#date-pick').datePicker({clickInput:true});，但你有 <input type="Text name="timestamp" value="" id="data-pick"> ... data-pick 而不是 @ 987654326@.

标签： javascript html jquery-selectors

【解决方案1】：

如果你想使用不同的关键字在同一个元素上设置不同的 Javascript 功能，我建议为元素分配不同的类，因为你可以有多个类，但每个元素只有一个 id。

例如，而不是：

<input id="date-pick" id="some-other-thing" />

这显然是错误的，而且标记不好：

<input class="date-pick some-other-thing" />

然后在你的 Javascript 中使用

$(".date-pick").datePicker();
$(".some-other-thing").someOtherThing();

需要指出的一点是，类没有唯一性要求，因此您可以拥有多个具有相同类的元素，并且上面的代码将datePicker 或someOtherThing 功能应用于所有这些.

【讨论】：