jQuery通过变量选择数据属性名的正确语法求解

看起来你遇到的是动态拼接data属性键名的常见坑，我来帮你拆解问题并给出解决方案：

首先，直接写data('option1')可行，但用变量index拼接就不行，核心问题大概率是变量拼接的方式错误，或者对jQuery的data()方法的工作机制理解有偏差。

正确的动态拼接写法 #

你需要把固定字符串和变量index做字符串拼接，而不是把变量放在引号里当成字面量。举个具体的例子：

// 假设你的循环是这样的（比如for循环或者each循环）
$('.some-element').each(function(index) {
  // 注意：如果index从0开始，可能需要+1来匹配option1/option2的命名
  const dataKey = 'option' + (index + 1); 
  // 正确写法：用拼接后的变量作为data的参数
  const optionValue = $(this).data(dataKey);
  
  console.log(optionValue); // 现在应该能正确获取到data-option1、data-option2等值
});

为什么你的写法可能出错？ #

常见的错误写法包括：

• 把变量放在引号内：比如data('option[index]')——这会把option[index]当成一个固定的键名，而不是解析index变量的值
• 拼接时没处理变量起始值：如果index从0开始，但你的data属性是option1、option2，就会出现键名不匹配的问题

备选方案：用attr()方法获取 #

如果data()方法因为缓存机制（jQuery会缓存初始的data属性值，后续动态修改的话data()不会同步更新）导致取不到最新值，可以试试用attr()直接获取属性：

const optionValue = $(this).attr('data-option' + (index + 1));

最后验证步骤 #

1. 先在控制台打印'option' + index的结果，确认它和HTML中的data属性完全匹配（比如HTML里是data-option1，打印结果应该是option1）
2. 检查循环中的index是否是你预期的数值（比如是否从1开始，而不是0）

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