在 Shopify 上基于 CSS 类显示对象答案

【问题标题】：Displaying objects based on CSS class on Shopify在 Shopify 上基于 CSS 类显示对象
【发布时间】：2021-04-17 09:00:13
【问题描述】：

我正在尝试过滤产品在网站上的显示方式。我已将产品标签添加到该项目的类别中。我的标签之一是“消费者”。

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

<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>

每个产品都有一个id="product-item"，如果没有class="consumer"，我希望隐藏"product-item"。

【问题讨论】：

ID 必须是唯一的。改用另一个类。
@Andy 代码看起来如何？我尝试替换代码的 ID 部分，但它不起作用。我正在使用.product-item 类
如果类是使用液态代码添加的，那么 CSS 是最好的，不需要使用 javascript 代码。
@Onkar 我将如何使用纯 CSS 来做到这一点？
如果你把 URL 或代码快照发给我，我会把 CSS 代码发给你，不检查 HTML CSS 代码更难写

标签： javascript jquery css shopify

【解决方案1】：

好的。因此，首先，ID 必须是唯一的。因此，只需在您的课程列表中添加一个新课程，然后遍历产品项目。

$('.product-item').each(function () {
  const el = $(this);
  if (el.hasClass('consumer')) {
    el.css({ 'display': 'flex' });
  } else {
    el.css({ "display": "none" });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cart">
  <div class="product-item consumer">Tree</div>
  <div class="product-item">Bird</div>
  <div class="product-item consumer">Car</div>
  <div class="product-item">Shed</div>
  <div class="product-item consumer">Acorn</div>
</div>

或者，也许更简单：

$('.product-item').not('.consumer').hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cart">
  <div class="product-item consumer">Tree</div>
  <div class="product-item">Bird</div>
  <div class="product-item consumer">Car</div>
  <div class="product-item">Shed</div>
  <div class="product-item consumer">Acorn</div>
</div>

【讨论】：

感谢大家的帮助，设法让它适用于我的特定配置。你可以在这里查看：jsfiddle.net/4vj3kgew/1