Question

我已经安装了一个JQuery日期选择器插件。我有两个日期需要选择。

  <div class="col-md-5">
    From:  <input id="datetimepicker" type="text" >
  </div>
  <div class="col-md-5">
    To:   <input id="datetimepicker2" type="text" >
  </div>

然后我用

在脚本标签之间调用它们

$('#datetimepicker').datetimepicker();
$('#datetimepicker2').datetimepicker();

这似乎有效，但我想知道是否有一种更简洁的方法可以解释我上面写两行的方式？

Answer 1

您可以使用逗号分隔的多个选择器。请尝试：

 $('#datetimepicker,#datetimepicker2').datetimepicker();

Answer 2

假设.col-md-5将始终包含您的日期选择工具input：

$('.col-md-5 input').datetimepicker();

甚至更好;给你的input一个独特的类，并使用它：

<强> HTML

<div class="col-md-5">
    From:  <input class="datetimepicker" id="datetimepicker" type="text" >
</div>
<div class="col-md-5">
    To:   <input class="datetimepicker" id="datetimepicker2" type="text" >
</div>

<强> jQuery的：

$('.datetimepicker').datetimepicker();

Answer 3

这取决于插件是否支持多个选择器，但您可以尝试为插件提供两个选择器：

$('#datetimepicker, #datetimepicker2').datetimepicker();

如同in the documentation所述，jQuery支持。

您可以指定任意数量的选择器组合成单个结果。这种多表达式组合子是选择不同元素的有效方法。返回的jQuery对象中DOM元素的顺序可能不相同，因为它们将按文档顺序排列。

另一个例子是一次隐藏多个元素：

$('#elem1, #elem2').hide();

在这些情况下，应该考虑使用类名来＆＃34; group＆＃34;元素在一起。当处理一个且只有一个元素时，应该使用id属性。

Answer 4

您也可以使用this：

$('[id^=datetimepicker]').datetimepicker();

但更好的是为他们使用一个通用的类名并使用如下：

$('.datetimepicker').datetimepicker();

在页面上两次使用Jquery插件

4 个答案: