如何点击按钮选中单个多类名且非同层的动态生成Input元素？

嘿，我来帮你搞定这个问题！咱们先理清楚核心需求：点击按钮时，要找到跟它同组的目标输入框（带changes-input类），切换它的样式类，而且页面是动态生成多个相同结构的元素，必须保证每个按钮只操作自己对应的输入框，不能串味儿。

原方案为啥不好使？ #

你的原JS代码里，$(this).parent("div")只能找到按钮的直接父级（就是那个.btn-group），但目标输入框在更上层的.container容器里，所以find('.changes-input')根本找不到元素，这就是定位失败的关键。另外，动态生成的元素用固定id绑定事件（比如$('#the-button')）会失效，因为元素生成后事件没绑定上。

修正后的代码实现 #

HTML结构（保留你的动态生成逻辑，按钮别用固定id，用类名就行）

<div class="container flex-row">
  <textarea class="changes-input flex-item-16 form-control" placeholder="text" type="text"></textarea>
  <div class="flex-item flex-self-no-padding" style="min-width: 65px">
    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-success edit-change-btn">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
      <button type="button" class="btn btn-danger" onclick="rejectChange(2)">
        <i class="fa fa-times" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>

JavaScript代码（事件委托+正确层级定位，完美适配动态元素）

// 用事件委托绑定到父容器（推荐用更接近的父元素，比如所有container的共同父级，这里用document也没问题）
$(document).on('click', '.edit-change-btn', function () {
  // 从当前按钮往上找，找到最近的.container容器——这是精准定位同组元素的核心！
  const $container = $(this).closest('.container');
  // 在这个容器里找到对应的changes-input，绝对不会找错其他组的！
  const $targetInput = $container.find('.changes-input');
  
  // 切换样式类：先移除选中类，再切换普通类（如果是要在两种状态间切换，下面有更简洁的写法）
  $targetInput.removeClass("changes-text-area-selected")
             .toggleClass("changes-textarea-normal");
});

划重点的知识点 #

• 事件委托：$(document).on('click', '.edit-change-btn', ...) 这种方式能给动态生成的元素绑定事件，不管元素什么时候创建，只要匹配类名就能触发，再也不用担心新生成的按钮没反应啦。
• closest()方法：$(this).closest('.container') 会从当前元素开始往上遍历DOM，直到找到第一个匹配.container的父元素，这就保证了每个按钮只操作自己所在容器里的输入框，精准得很。
• 链式调用：jQuery支持链式调用，把removeClass和toggleClass连起来写，代码更简洁清爽。

如果你的需求是在“选中”和“普通”两种状态之间来回切换，还可以改成更简洁的写法：

$targetInput.toggleClass("changes-text-area-selected changes-textarea-normal");

这样会自动切换两个类的状态，不需要先移除再切换，一步到位～

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