Javascript 需要基于换行div'显示/隐藏图像；s数据组

我需要根据动态拉取的数据组值显示色样。有时数据组将包括所有3个样本（银、玫瑰和金），有时仅包括一个。我不能硬编码显示：没有，因为它是动态的。我需要显示/隐藏的图像是银色、玫瑰色和金色类的图像。如果我需要进一步澄清，请告诉我

以下是我的上下文暂存链接：

---

这应该是让您开始学习的东西。它将隐藏所有不相关的内容，然后只显示与搜索相关的内容。如果需要更多帮助，请发表评论

$（“[show class]”）。单击（函数（）{
$（“.shoppingImage”）.hide（）
$（“+$（this.attr（“show class”））.show（）；
});
//对于laod页上的：
url=新url（window.location.href）；
searchParams=新的URLSearchParams（url.search）；
$（“[show class=“+searchParams.get（'show'）+”]）。单击（）
img{
宽度：100px；
}
[表演课]{
光标：指针；
}

仅显示：

rose
银
黄金

项目名称
$450
在上面的html中，div有两个
数据组
值。那么应该显示哪个图像呢？应该显示与数据组值具有相同类的图像。我对javascript非常陌生，所以我不确定这是否正是我所需要的。不需要将其绑定到过滤器或搜索，只需要根据包装div的数据组自动显示或隐藏。很抱歉，如果我误解了什么，我对js很陌生：-/我不希望用户必须单击任何东西，只希望它根据加载的值显示或隐藏。根本不需要用户交互。你在PHP中使用get参数吗？不，我在Webflow中构建网站，所以我有点受限。然后使用jQuery对其进行过滤，最终看起来会更好。
<a href="/our-collection/examplelink">
<div data-group="silver rose" class="product">
  <img src="/exampleimg.jpg" />

      <div class="product-listing-details">
        <h2 class="product-listing-hdr">Item Name</h2>
        <p class="product-listing-price">$450</p>

        <img class="silver" src="https://exampleimg.png" />
        <img class="rose" src="https://exampleimg.png" />
        <img class="gold" src="https://exampleimg.png" />

      </div>

</div>
</a>