通过dataset获取元素失效问题排查：绑定父元素事件后无法匹配对应元素

嘿，我一眼就看到你代码里的问题了——querySelector的属性选择器写法错了！你直接把变量e.target.dataset.test硬写到了字符串选择器里，浏览器会把它当成字面量去查找，而不是读取变量的实际值。

错误原因拆解 #

你原来的代码里这一行：

const check= ctt.querySelector('[data-test = e.target.dataset.test]');

浏览器会理解成：去找.main-02里data-test属性值等于"e.target.dataset.test"的元素，但你的DOM里根本没有这个值的元素，所以check一直是null，功能自然跑不起来。

修复方案 #

咱们把选择器改成动态读取变量值的形式，有两种常用写法：

方法1：使用ES6模板字符串（推荐）

用反引号`包裹选择器，变量用${}插入：

const ct = document.querySelector('.main-01'); 
const ctt = document.querySelector('.main-02'); 
ct.addEventListener('click', function(e) {
  // 先判断点击的是按钮，避免空白区域触发无效操作
  if(e.target.tagName === 'BUTTON') {
    const check = ctt.querySelector(`[data-test="${e.target.dataset.test}"]`);
    console.log(check);
  }
});

方法2：字符串拼接

如果不熟悉模板字符串，也可以用传统的字符串拼接方式：

const ct = document.querySelector('.main-01'); 
const ctt = document.querySelector('.main-02'); 
ct.addEventListener('click', function(e) {
  if(e.target.tagName === 'BUTTON') {
    const testValue = e.target.dataset.test;
    const check = ctt.querySelector('[data-test="' + testValue + '"]');
    console.log(check);
  }
});

额外优化：增加元素判断 #

我加了if(e.target.tagName === 'BUTTON')这一步，是因为事件委托会监听父元素下所有子元素的点击——如果用户点到.main-01的空白区域，e.target.dataset.test会是undefined，这时候querySelector也会返回null，加个判断能避免不必要的错误。

完整可运行代码 #

HTML和CSS保持你的原代码不变，替换JS为上面修复后的版本即可：

<div class="main-01"> 
  <button data-test="1">button-01</button> 
  <button data-test="2">button-02</button> 
  <button data-test="3">button-03</button> 
</div> 
<div class="main-02"> 
  <div data-test="1" class="test"></div> 
  <div data-test="2" class="test"></div> 
  <div data-test="3" class="test"></div> 
</div>

.main-01, .main-02 { 
  display: flex; 
  flex-direction: row; 
  gap: 15px; 
} 
.main-01 { 
  width: 570px; 
  justify-content: center; 
  margin-bottom: 15px; 
} 
.test { 
  width: 180px; 
  height: 90px; 
  background-color: orange; 
}

const ct = document.querySelector('.main-01'); 
const ctt = document.querySelector('.main-02'); 
ct.addEventListener('click', function(e) {
  if(e.target.tagName === 'BUTTON') {
    const check = ctt.querySelector(`[data-test="${e.target.dataset.test}"]`);
    console.log(check);
    // 这里可以添加你需要的后续操作，比如高亮选中的test元素
  }
});

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