如何用jQuery实现多输入框分别填充独立Div？

嘿，我来帮你搞定这个困扰！你之前的代码只能实现单个输入框对应单个Div，核心问题是没给元素做关联标识，导致多个元素时无法区分目标。下面我给你两种简单可靠的实现方案：

方案一：用data-*属性绑定对应关系 #

这种方式最直观，给每个输入框加data-target属性，指定它要填充的Div的ID，代码清晰好维护：

完整代码示例 #

<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  Enter text for Div 1: <br>
  <input type="text" data-target="div1"> <!-- 绑定目标Div的ID -->
  <br><br>
  Enter text for Div 2: <br>
  <input type="text" data-target="div2">
</form>

<!-- 对应的Div，ID要和input的data-target一致 -->
<div id="div1"></div>
<div id="div2"></div>

<script>
// 给所有输入框绑定事件
$('input').on('keyup change', function() {
  // 获取当前输入框对应的目标Div的ID
  const targetDivId = $(this).data('target');
  // 找到目标Div并更新内容
  $('#' + targetDivId).html($(this).val());
});
</script>

方案二：用ID命名规则匹配 #

如果不想用data属性，也可以给input和Div设置对应命名的ID，比如input-1对应div-1，代码能自动匹配：

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  Enter text for Div 1: <br>
  <input type="text" id="input-1">
  <br><br>
  Enter text for Div 2: <br>
  <input type="text" id="input-2">
</form>

<div id="div-1"></div>
<div id="div-2"></div>

<script>
$('input').on('keyup change', function() {
  // 从input的ID中提取编号，拼接成对应Div的ID
  const inputId = $(this).attr('id');
  const targetDivId = inputId.replace('input-', 'div-');
  $('#' + targetDivId).html($(this).val());
});
</script>

关键细节说明 #

• 我把原来的bind换成了on，这是jQuery官方推荐的事件绑定方式，更灵活，还支持后续动态添加的元素。
• 核心逻辑就是让每个输入框明确知道自己要更新哪个Div，通过标识（data属性或ID规则）建立一一对应关系，不管你加多少组输入框和Div，都能正常工作。

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