Question

我需要根据动态提取的数据组值显示颜色样本。有时数据组将包括所有3个样本（银色，玫瑰色和金色），有时它只包括一个。我无法在display：none中进行硬编码，因为它是动态的。我需要展示/隐藏的图像是具有银色，玫瑰色和金色的图像。如果我需要进一步澄清，请告诉我。

以下是我的上下文暂存链接：http://cerimani-new.webflow.io/our-collections/view-all

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

Answer 1

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

$("[show-class]").click(function () {
  $(".shoppingImage").hide()
  $("." + $(this).attr("show-class")).show();
});

//for on page laod:

url = new URL(window.location.href);
searchParams = new URLSearchParams(url.search);
$("[show-class=" + searchParams.get('show') + "]").click();

img {
  width:100px;
}

[show-class] {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-group="silver rose" class="product">
  <img src="/exampleimg.jpg" />
  
  Only show:
  <ul>
    <li show-class="rose">Rose</li>
    <li show-class="silver">Silver</li>
    <li show-class="gold">Gold</li>
  </ul>

      <div class="product-listing-details">
        <h2 class="product-listing-hdr">Item Name</h2>
        <p class="product-listing-price">$450</p>

        <img class="shoppingImage silver" src="https://ak1.ostkcdn.com/images/products/9576615/ICZ-Stonez-Sterling-Silver-2-7-8ct-TGW-Cubic-Zirconia-Princess-Bridal-Engagement-Ring-Set-a06f1f4b-a973-4bf4-bdb8-e10b90946f2a_600.jpg" />
        <img class="shoppingImage rose" src="https://s-media-cache-ak0.pinimg.com/736x/27/1e/18/271e18e5c0c63651b77cfe11a7ad8e22.jpg" />
        <img class="shoppingImage gold" src="http://www.cartier.com/content/dam/rcq/car/63/69/78/636978.png.scale.314.high.png" />

      </div>

</div>

需要根据包装div的数据组显示/隐藏图像

1 个答案: