JavaScript/jQuery实现同ClusterID输入框值自动联动同步咨询

首先要提一个你现有代码的潜在隐患：

你目前的代码把相同的ClusterID拼接到输入框的id属性上，会生成大量重复id的DOM元素，这不符合HTML全局唯一id的规范，长期运行可能出现DOM选择失效、浏览器解析异常的问题。

我们可以在尽量少改动你原有PHP逻辑的基础上，通过自定义属性标记分组实现联动，完全匹配你的需求。

第一步：微调PHP生成的输入框代码 #

只需要在原有input标签上做几处小改动：

• 给所有评估输入框加统一的类名，方便后续DOM选择
• 把当前行的ClusterID存到自定义data-cluster-id属性里作为分组匹配的标记
• 给原来拼接的id追加上任务的唯一序号，保证页面内所有DOM元素的id全局不重复，规避规范问题

微调后的代码片段：

<td style="overflow-x: hidden; width: 90px">
  <a style="display: none"><?= $Assessment ?></a>
  <div class="input-group mb-3">
    <div class="input-group-prepend"></div>
    <input
      type="number"
      id="cluster<?= $ClusterID . '_' . $task序号 ?>" 
      name="selfRating[]"
      min="0"
      max="10"
      value="<?= $Assessment ?>"
      class="form-control cluster-rating"
      data-cluster-id="<?= $ClusterID ?>" 
      aria-describedby="basic-addon1"
    />
  </div>
</td>

第二步：编写联动触发逻辑 #

原生JavaScript版本 #

不需要依赖第三方库，直接监听输入框的输入行为，匹配同分组的输入框自动同步数值：

document.querySelectorAll('.cluster-rating').forEach(input => {
  input.addEventListener('input', function () {
    // 读取当前输入框所属的分组ID
    const groupId = this.dataset.clusterId
    // 选中同组的所有输入框
    const groupInputs = document.querySelectorAll(`.cluster-rating[data-cluster-id="${groupId}"]`)
    // 同步当前输入的数值
    groupInputs.forEach(el => el.value = this.value)
  })
})

如果你的输入框是后续动态异步渲染到页面的，直接把事件绑在document上用事件委托实现，不需要逐个给元素绑定事件：

document.addEventListener('input', function (e) {
  if (e.target.classList.contains('cluster-rating')) {
    const groupId = e.target.dataset.clusterId
    document.querySelectorAll(`.cluster-rating[data-cluster-id="${groupId}"]`)
      .forEach(el => el.value = e.target.value)
  }
})

jQuery版本 #

如果项目已经引入了jQuery，代码会更简洁，并且天生支持动态生成元素的事件绑定：

$(document).on('input', '.cluster-rating', function () {
  const groupId = $(this).data('cluster-id')
  const inputVal = $(this).val()
  $(`.cluster-rating[data-cluster-id="${groupId}"]`).val(inputVal)
})

效果验证 #

按照你给出的示例场景：

• 序号1、2的任务ClusterID为1.1.1，属于同一分组
• 序号3、4的任务ClusterID为1.1.2，属于另一分组
• 当用户在序号1的输入框输入评估值时，脚本会自动匹配所有data-cluster-id="1.1.1"的输入框，把数值同步过去，序号2的输入框会自动填充和序号1完全一致的值，和需求完全匹配。

内容的提问来源于stack exchange，提问作者Wok Le