如何为多个控件复用同一JavaScript函数？附示例代码

AI 小北

2026-5-22

当然可行！给多个控件复用同一个JavaScript逻辑的几种方法

针对你给出的jQuery UI Datepicker示例，完全可以让多个输入框共用同一个配置逻辑，下面是几种常用的实现方式：

方案一：使用类选择器（最推荐）

因为ID是页面唯一的，我们可以给需要应用Datepicker的输入框添加同一个类名，然后通过类选择器一次性选中所有目标元素，统一应用配置。

修改后的HTML代码：

<input type="text" id="datepicker" class="datepicker-field">
<input type="text" id="datepicker2" class="datepicker-field">

对应的JavaScript代码：

$(function () {
  // 选中所有带datepicker-field类的元素，应用同一个Datepicker配置
  $(".datepicker-field").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true
  });
});

方案二：多ID选择器直接选中

如果你想保留原有的ID，也可以通过逗号分隔多个ID选择器，一次性选中多个元素：

$(function () {
  $("#datepicker, #datepicker2").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true
  });
});

方案三：抽离共用配置（适合后续微调）

如果之后可能需要给某个输入框单独修改部分配置，但基础逻辑还是共用的，可以把配置抽成独立的变量，再分别给每个控件应用：

$(function () {
  // 定义共用的Datepicker配置
  const sharedDatepickerOpts = {
    showOtherMonths: true,
    selectOtherMonths: true
  };

  // 给每个输入框应用共用配置
  $("#datepicker").datepicker(sharedDatepickerOpts);
  $("#datepicker2").datepicker(sharedDatepickerOpts);

  // 比如之后想给第二个输入框加个额外配置，直接扩展即可
  // $("#datepicker2").datepicker("option", "minDate", 0);
});