如何通过className和指定dataset值用querySelectorAll，Razor页面报错如何解决

问题排查与解决方法 #

1. 先修正类名选择器匹配错误 #

你当前代码存在最明显的疏漏：JS选择器写的是.date（匹配class为date的元素），但HTML中所有目标元素的class为dates，二者不匹配导致筛选不到元素，先将选择器修正为.dates。

2. 解决dates is not defined报错 #

该报错的核心原因是JS将dates识别为变量而非选择器字符串的一部分，按优先级排查以下场景：

• 检查选择器是否漏加引号：确保你调用querySelectorAll时传入的参数是完整包裹在引号内的字符串，错误写法示例：document.querySelectorAll(dates[data-waiting="false"]) （漏了外层引号，浏览器会把dates当作变量查找，触发未定义报错），正确写法参考下文示例。
• 检查Razor语法冲突：如果你的script标签内用到了Razor输出逻辑，确认没有未定义的后端变量@dates被渲染到JS代码中，导致生成的JS代码出现未定义标识符。
• 检查作用域冲突：确认你没有在其他地方删除、覆盖了dates相关的变量定义。

3. 动态修改dataset后筛选失效的解决 #

querySelectorAll会基于当前DOM的实时状态筛选元素，只要修改属性时同步到DOM属性即可被识别，注意不要直接给元素挂载自定义属性，使用以下两种标准写法修改data-waiting属性：

// 写法1：操作dataset
element.dataset.waiting = "false";
// 写法2：直接操作DOM属性
element.setAttribute("data-waiting", "false");

修正后可用代码示例 #

// Ajax请求完成后执行
const selector = '.dates[data-waiting="false"]';
// 可先打印选择器确认是否符合预期
console.log(selector);
const huecosDisponibles = document.querySelectorAll(selector);
console.log(huecosDisponibles);

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