我在购物网站上有一个产品浏览页面，其中显示产品图片列表。
一些产品有颜色选项，这些颜色选项的图像可以通过单击相关的颜色框来显示。然后将主要产品图像交换为相关的彩色产品图像。
我正在使用下面的 jquery 代码来交换产品图像，并传递一个悬停图像 url，它在悬停图像时显示（使用一些不同的代码完成）
// change browse image on child colour box click
jQuery(function() {
jQuery('div[child-image]').click(function(event) {
jQuery('img[id~=product-browse-image-'+event.target.id+']')
.attr('src', jQuery(this).attr('child-image'))
.attr('hover-image', jQuery(this).attr('child-hover-image'))
}).each(function() {
jQuery('<img />').attr('src', jQuery(this).attr('child-image'));
});;
});
客户还可以按颜色过滤商店中的产品。
完成此操作后&colour=RED1，例如添加到 url
我想使用此变量并根据值“RED1”或页面加载时显示的任何值切换图像，因此人们过滤红色项目，产品具有红色选项，显示红色图像。刚刚以红色出售的产品已经以红色显示其唯一的图像。
在这种情况下，包含相关图像的彩色框，我希望替换看起来像这样：
<div id="1" class="child-colour RED1" child-image="/images/BC_00000475_190x253.jpg" child-hover-image="/BC_00000474_190x253.jpg"></div>
我可以从 url 中获取变量值，为了便于解释，它是“值”
所以我想我需要在某些时候使用它：
div[class^="child-colour '+value+'"]
但除此之外，我不知道如何使用上面的代码来实现我所解释的。