Javascript 在Shopify上显示基于CSS类的对象

我试图过滤产品在网站上的显示方式。我将产品标签添加到项目的类中。我有一个标签是“消费者”

我只想展示带有“消费者”标签的产品，并提出了以下代码，但它似乎无法正常工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  if($("#product-item").hasClass('consumer')){
   $("#product-item").css({"display": "flex"});
  } else {
     $("#product-item").css({"display": "none"});
 }
</script>

if（$（“#产品项”）.hasClass（'consumer'））{
$（“#产品项”）.css（{“显示”：“flex”}）；
}否则{
$（“#产品项”）.css（{“显示”：“无”}）；
}

---

每个产品都有一个

id=“product item”

，如果没有

class=“consumer”

，确定，我将隐藏

“product item”

。因此，首先，ID必须是唯一的。因此，只需在类列表中添加一个新类，然后循环遍历产品项

$（'.product item'）。每个（函数（）{
const el=$（本）；
if（el.hasClass（‘消费者’））{
css（{'display'：'flex'}）；
}否则{
el.css（{“display”：“none”}）；
}
});

树
鸟
汽车
棚
橡子
id必须是唯一的。改用另一个类。@Andy代码看起来怎么样？我尝试替换代码的ID部分，但它不起作用。我正在使用
。产品项
classif类是使用液体代码添加的，那么CSS最适合它，不需要使用javascript代码。@Onkar我如何使用纯CSS？如果你给我发送URL或代码快照，我会给你发送CSS代码，而不检查HTML CSS代码，编写CSS代码就比较困难。谢谢大家的帮助，设法让它在我的特定配置下正常工作。您可以在这里查看：