通过data属性选中元素的正确遍历语法求助

你的问题出在模板字符串的语法错误，错误混合了模板字符串与普通字符串拼接的写法，导致选择器格式失效。

正确代码示例： #

var sidebar = [];

for (var i = 1; i <= 6; i++) {
  // 直接在模板字符串中嵌入变量i，保持选择器的完整格式
  sidebar.push(document.querySelector(`[data-language-key='sidebar-${i}']`).innerHTML);
}

语法说明： #

模板字符串（用反引号`包裹）支持通过${变量名}的方式直接嵌入变量，无需再用+拼接字符串。修正后会自动生成[data-language-key='sidebar-1']到[data-language-key='sidebar-6']的正确选择器，和你最初单个获取的格式完全一致。

可选优化方案： #

如果不确定sidebar的数量，或者想减少DOM查询次数，可以一次性获取所有匹配元素再处理：

// 获取所有data-language-key以sidebar-开头的元素
var sidebarElements = document.querySelectorAll("[data-language-key^='sidebar-']");
// 转换为数组并提取innerHTML
var sidebar = Array.from(sidebarElements).map(el => el.innerHTML);

这种方式更灵活，无需手动设置循环次数，自动适配所有sidebar-X元素。

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