如何对多个输入使用相同的$(document).ready(function() ?

Question

我是JavaScript/jQuery新手，我使用DatePicker在一个表单中有4个日期选择。

看到设置是相同的，我尝试使用dp1的所有4个日期选择，但它不起作用。第一个日期可以选择，但其他三个不行。

所以目前我是这样做的，但似乎没有意义的额外代码，因为设置是相同的。

<script type='text/javascript'>
  $(document).ready(function() {
     $('#dp1').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
  });
</script>
<script type='text/javascript'>
  $(document).ready(function() {
     $('#dp2').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
  });
</script>
<script type='text/javascript'>
  $(document).ready(function() {
     $('#dp3').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
  });
</script>
<script type='text/javascript'>
  $(document).ready(function() {
     $('#dp4').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
  });
</script>

还有别的方法吗?

Answer 1

当然可以:)注意，你甚至不需要使用4个不同的日期选择器函数，因为你可以使用jQuery选择器来瞄准所有4个日期选择器，像这样:

<script type='text/javascript'>
 $(document).ready(function() {
    $('#dp1, #dp2, #dp3, #dp4').datepicker({
     autoclose: true,
     format: "yyyy-mm-dd"
     });
  });
 </script>

Answer 2

是的!你可以这样做:

<script type='text/javascript'>
  $(document).ready(function() {
     $('#dp1').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
     $('#dp2').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
     $('#dp3').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
     $('#dp4').datepicker({
         autoclose: true,
         format: "yyyy-mm-dd"
     });
  });
</script>

Answer 3

或者(只给它们一个css class all_dps)

<script type='text/javascript'>
$(document).ready(function() {
  $('.all_dps').datepicker({
   autoclose: true,
   format: "yyyy-mm-dd"
  });
});
</script>