Prestashop中点击缩略图切换背景图失效，求正确JavaScript实现方案

嘿，我明白你遇到的问题了——把主图从<img>标签改成div背景图后，原来的JS代码就失效了对吧？这是因为背景图是CSS属性，不是HTML元素的原生属性，原来用attr()方法修改src的思路完全不适用于这种场景。

问题根源 #

之前的代码是针对<img>标签的src属性做修改，但现在你把主图改成了product-cover这个div的background-image CSS样式，这时候必须用操作CSS的方法来更新样式，而不是操作HTML属性。

正确的JS实现方式 #

你需要使用jQuery的css()方法来修改div的background-image样式，代码如下：

// 先获取缩略图对应的大图地址
const largeImageUrl = $(event.target).data('image-large-src');
// 给product-cover容器设置新的背景图
$('.product-cover').css('background-image', `url(${largeImageUrl})`);

也可以简化成一行代码：

$('.product-cover').css('background-image', `url($(event.target).data('image-large-src'))`);

额外注意事项 #

• 要确保你的缩略图元素上确实存在data-image-large-src属性，并且里面的图片URL是有效的；
• 如果图片URL包含空格或特殊字符，PrestaShop一般会自动转义，但如果遇到加载问题，可以手动对URL做转义处理；
• 如果页面上有多个商品主图容器，建议给product-cover加上更精准的选择器（比如结合商品ID），避免误修改其他元素的背景。

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