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

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

概述正如您在下面的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图标不会出现在输入文本框旁边所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1074243.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存