多区块场景下点击按钮将Header内容复制至Input的实现方案

你的问题在于原代码使用document.querySelector只会选取匹配到的第一个元素，所以多个区块时只有第一个按钮和标题生效。下面提供两种可行的解决方案：

方法1：遍历所有按钮绑定事件 #

这种方式适合静态DOM结构，直接给每个按钮单独绑定点击事件，通过按钮的父容器找到对应标题：

const resInp = document.querySelector('.research-title');
// 获取所有弹窗按钮
const modalBtns = document.querySelectorAll('.popup-btn');

// 遍历每个按钮绑定点击事件
modalBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮所属的弹窗容器，再获取里面的标题
    const targetTitle = this.closest('.popup_wrap').querySelector('h3');
    resInp.value = targetTitle.innerHTML;
  });
});

方法2：事件委托（推荐） #

如果区块会动态添加（比如通过JS生成新弹窗），事件委托更高效，只需给共同父容器绑定一次事件：

const resInp = document.querySelector('.research-title');

// 给body绑定事件（也可以替换成所有弹窗的直接父容器，更精准）
document.body.addEventListener('click', function(e) {
  // 判断点击的元素是弹窗按钮
  if (e.target.classList.contains('popup-btn')) {
    // 找到对应容器里的标题
    const targetTitle = e.target.closest('.popup_wrap').querySelector('h3');
    resInp.value = targetTitle.innerHTML;
  }
});

对应的HTML结构保持不变即可：

<div class="popup_wrap">
  <h3>Title</h3>
  <a class="popup-btn" data-modal="5">Click</a>
</div>
<div class="popup_wrap">
  <h3>Title2</h3>
  <a class="popup-btn" data-modal="5">Click</a>
</div>
<input class="research-title" type="text">

关键说明 #

• closest('.popup_wrap')：从当前元素向上查找最近的匹配容器，确保精准定位到当前按钮所属的区块
• querySelectorAll：获取所有匹配的元素，而非只取第一个

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