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

Question

我正在尝试筛选产品在网站上的显示方式。我已经将产品标签添加到项目的类中。我拥有的标签之一是"；消费者"；。

我只想展示带有"；消费者；标记，并编写了以下代码，但似乎无法正常工作。

<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必须是唯一的。因此，只需将一个新类添加到类列表中，然后在产品项上循环即可。

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