非jQuery实现：匹配foo的data-id的列表元素选择与修改问题

嘿，我来帮你搞定这个问题！你的核心问题出在选择器字符串没有正确引用变量，同时可能对列表元素的定位逻辑有点小偏差。让我一步步帮你修正：

问题分析 #

你写的选择器 .listing-filter[data-id = fooId] 里，fooId 会被当作字面量字符串处理，而不是你之前定义的变量值，所以自然找不到匹配的元素。另外，如果 .listing-filter 是列表容器的话，你应该在容器内部查找对应 data-id 的子元素，而不是直接选择容器本身。

修正后的代码 #

let foo = document.querySelector('.foo');
let listContainer = document.querySelector('.listing-filter'); // 明确这是列表容器
let fooId = foo?.dataset.id; // 可选链操作符避免foo不存在时报错

let listingFilter = () => {
  if (fooId) { // 简化判断，fooId存在就执行
    // 1. 在列表容器内查找所有与foo拥有相同data-id的元素
    let targetElements = listContainer.querySelectorAll(`[data-id="${fooId}"]`);
    
    // 2. 遍历找到的元素，修改它们的data-id为'hidden'
    targetElements.forEach(element => {
      element.setAttribute('data-id', 'hidden');
    });
  }
}

关键细节说明 #

• 模板字符串插入变量：用反引号`包裹选择器，变量用${变量名}插入，这样选择器能正确识别fooId的实际值。
• 精准范围查找：用listContainer.querySelectorAll()代替全局查找，只在列表容器内搜索，避免影响页面其他元素。
• 遍历处理多个元素：用forEach遍历找到的所有匹配元素，确保所有符合条件的元素都被处理（如果只有一个元素，这个写法也完全适用）。
• 可选链操作符：foo?.dataset.id可以避免当.foo元素不存在时，访问dataset导致的报错，让代码更健壮。

补充说明 #

如果你确实是要选择带有.listing-filter类且data-id等于fooId的元素（而不是容器内的子元素），只需要把选择器改成：

let targetElements = document.querySelectorAll(`.listing-filter[data-id="${fooId}"]`);

这样修改后，你就能成功找到目标元素并修改它的data-id，后续通过CSS[data-id="hidden"]就能隐藏这些元素啦！

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