Question

我有以下html代码按原样运行:(我已经尝试了下面给出的两个答案但是它们都没有工作任何其他建议将不胜感激）

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /> 
      <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script> 
      <script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"></script>  
   </head>

   <body>
      <script type="text/javascript">
         $(function() 
         {
            $('#timepickr-start:eq(0)').timepickr
               ({
                  convention: 12,
                  hoverIntent: false
               })
         });
      </script>
      <script type="text/javascript">
         $(function() 
         {
            $('#timepickr-end:eq(0)').timepickr
               ({
                  convention: 12,
                  hoverIntent: false
               })
         });
      </script>

      <div>
         <input id="timepickr-start" name='start' /> 
      </div>
      <br>
      <div>
         <input id="timepickr-end" name='end' />
      </div>

   </body>
</html>

有没有办法只有一个功能？我正在使用php并返回$ _POST ['start']和$ _POST ['end']。当我只有两个时间输入字段时，这不是什么大问题，但在某些页面上我有6或8个。

Answer 1

如果你想用一个javascript函数初始化多个timepicker实例，你可以添加一个类，让我们说timepickr，给每个实例初始化，并使用下面的函数：

<script type="text/javascript">
     $(function() 
     {
        $(".timepickr").each(function() {
          $(this).timepickr({
              convention: 12,
              hoverIntent: false
           });
        });
     });
  </script>

Answer 2

有几种方法可以实现这一目标。

1.为所有必填字段创建一个公共类，并将该函数添加到该类中，如下所示：

$('.classname').timepickr({
      convention: 12,
      hoverIntent: false
});

OR

2.使用以选择器

开头的属性

$("input[id^='timepickr']").timepickr({
     convention: 12,
     hoverIntent: false
});

如果你有几个这样的输入字段并且你不想在每个字段中添加一个类，那么第二种方法可以证明更可行。

如何为每个输入创建通用jquery函数

2 个答案: