在 Shopify 上显示基于 CSS class 的对象

Question

我正在尝试过滤产品在网站上的显示方式。我已将产品标签添加到商品的 class 中。我拥有的标签之一是“消费者”。

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

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

Answer 1

好的。因此，首先，ID 必须是唯一的。因此，只需将新的 class 添加到您的 class 列表，然后循环遍历产品项。

$('.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>

在 Shopify 上显示基于 CSS class 的对象

Displaying objects based on CSS class on Shopify

javascript

css

jquery

shopify