如何在change事件中将输入框值同步到侧边栏的jQuery对象？

在嵌套设计表单中，需要实现：当.field--name-field-design-name下的非直接子元素输入框内容变化时，将输入值动态填充到侧边栏对应的<p class="sidebar-design-name"></p>元素中，实现逻辑需与现有代码行$('.sidebar-design-number', $element).text('Design ' + (i+1))逻辑一致。

原有代码 #

const $singleDesignWrapper = $(
  ".field--name-field-design .field--name-field-design-name"
);

$singleDesignWrapper.each(function(i) {

  console.log($(this));

  // Object where I need to put the value  
  const $element =
    $('<div class="sidebar-designs-wrapper">
' +
    '  <div class="sidebar-single-design-container">
' +
    '    <div class="sidebar-design-number-and-name">
' +
    '      <p class="sidebar-design-number"></p>
' +
    '      <p class="sidebar-design-name"></p>
' +
    '    </div>
' +
    '    <p class="sidebar-garments-locations-count"></p>
' +
    '  </div>
' +
    '</div>');

  $('.sidebar-design-number', $element).text('Design ' + (i+1));
  $sidebarDesignsWrapper.append($element);

});

对应HTML结构 #

<div class="sidebar">
  <!-- some html here -->
  <div class="button-container current-step"></div>
  <div class="sidebar-designs-wrapper">
    <div class="sidebar-single-design-container">
      <div class="sidebar-design-number-and-name">
        <p class="sidebar-design-number"></p>
        <p class="sidebar-design-name"></p>
      </div>
      <p class="sidebar-garments-locations-count"></p>
    </div>
</div>

<div class="main">
  <div class="field--name-field-design">
    <div class="field--name-field-design-name">
      <div class="js-form">
        <input type="text" value="hello">
      </div>
    </div>
  </div>
  <div class="field--name-field-design"></div>
</div>

核心是在遍历设计项时，绑定输入框的变化事件，将值同步到对应侧边栏元素。修改后的完整代码如下：

const $singleDesignWrapper = $(
  ".field--name-field-design .field--name-field-design-name"
);
// 确保选择器正确指向侧边栏的容器
const $sidebarDesignsWrapper = $('.sidebar .sidebar-designs-wrapper');

$singleDesignWrapper.each(function(i) {
  // 获取当前设计项内的输入框（非直接子元素）
  const $input = $(this).find('input');
  // 重构侧边栏元素的创建语法，避免转义问题
  const $element = $(`
    <div class="sidebar-single-design-container">
      <div class="sidebar-design-number-and-name">
        <p class="sidebar-design-number"></p>
        <p class="sidebar-design-name"></p>
      </div>
      <p class="sidebar-garments-locations-count"></p>
    </div>
  `);

  // 设置设计编号，与原有逻辑一致
  $('.sidebar-design-number', $element).text('Design ' + (i+1));
  // 初始化填充输入框当前值
  $('.sidebar-design-name', $element).text($input.val());

  // 绑定输入框的实时变化事件，同步值到侧边栏
  $input.on('input change', function() {
    $('.sidebar-design-name', $element).text($(this).val());
  });

  $sidebarDesignsWrapper.append($element);
});

关键细节说明 #

• 使用$(this).find('input')精准定位当前设计项内的输入框，适配非直接子元素的结构
• 同时绑定input和change事件：input实现实时输入同步，change覆盖输入框失焦时的场景
• 初始化时填充输入框的现有值，避免侧边栏初始为空
• 利用闭包特性，每个输入框的事件回调都能对应到自己的侧边栏元素，不会出现混淆

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