JavaScript中使用data属性修改图片SRC无效的问题

我来帮你梳理下代码里的问题，这几个小细节导致了功能失效，咱们一步步调整：

1. 错误选中元素 #

你在点击事件里用 $('.color-click') 获取的是所有带这个类的按钮，而不是当前被点击的那一个。应该用 $(this) 来指代触发点击事件的元素，这样才能拿到对应按钮的 data-pic1 值。

2. data 属性获取方式优化 #

虽然 attr('data-pic1') 能拿到值，但jQuery的 data() 方法更适配data属性的读取，它会自动处理属性名的命名规则（比如 data-pic1 可以直接用 data('pic1') 获取），代码更简洁可靠。

3. 路径转义问题 #

你的 data-pic1 里用了反斜杠 \，在HTML中这是转义字符，会导致路径解析错误，应该改成正斜杠 /。

修正后的完整代码 #

HTML部分（修正路径）

<button data-pic1="images/logo.ppg" id="circle" class="color-click">点击切换图片</button>

JavaScript部分（修正元素选择与属性读取）

$(".color-click").click(function() {
  // 获取当前点击按钮的data-pic1值
  var piccolor1 = $(this).data('pic1');
  // 给目标图片设置新的src
  $('#products-products-small').attr('src', piccolor1);
});

额外验证点 #

• 确认目标图片元素 #products-products-small 确实存在于页面中，且选择器拼写无误；
• 检查 images/logo.ppg 文件是否存在于正确的目录下，路径是否匹配。

内容的提问来源于stack exchange，提问作者RO.IT