html – Datepicker图标不会出现在输入文本框旁边

概述正如您在下面的JS Fiddle中看到的那样,我只能在其中一个输入框旁边显示小的Datepicker图标.我需要它出现在两者旁边. 但是,将“id”更改为“class”不起作用,导致两个图标都消失. http://jsfiddle.net/Vzt39/ HTML: <title>jQuery UI Datepicker - Icon trigger</title> 正如您在下面的Js fiddle中看到的那样,我只能在其中一个输入框旁边显示小的Datepicker图标.我需要它出现在两者旁边.

但是,将“ID”更改为“class”不起作用,导致两个图标都消失.

http://jsfiddle.net/Vzt39/

HTML:           <Title>jquery UI Datepicker - Icon trigger</Title>      <script src="//AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.10.2/jquery.min.Js"></script>    <script src="//AJAX.GoogleAPIs.com/AJAX/libs/jqueryui/1.10.3/jquery-ui.min.Js"></script>      <script src="http://code.jquery.com/jquery-1.9.1.Js"></script>      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.Js"></script>      <script>      $(function() {        $( "#datepicker" ).datepicker({          showOn: "button",buttonImage: "calendar.gif",buttonImageOnly: true        });      });      </script>    <p>Date: <input type="text"  ID="datepicker" /></p>     <p>Date: <input type="text" ID="datepicker" /></p>CSS:  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.CSS" />  <link rel="stylesheet" href="/resources/demos/style.CSS" />

解决方法 您应该将ID更改为class,并将$(“#datepicker”)更改为$(“.datepicker”),因为标识符应该是唯一/不同的.

然后,将jquery代码包装到$(document).ready(function(){/*…*/});确保在执行JavaScript / jquery代码时在DOM中创建HTML元素.

结果看起来像这样：

<script>$(document).ready(function() {    $( ".datepicker" ).datepicker({          showOn: "button",buttonImageOnly: true     });});</script><p>Date: <input type="text"  /></p><p>Date: <input type="text"  /></p>

这是一个工作小提琴：http://jsfiddle.net/GJHuf/1/

总结

以上是内存溢出为你收集整理的html – Datepicker图标不会出现在输入文本框旁边全部内容，希望文章能够帮你解决html – Datepicker图标不会出现在输入文本框旁边所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。