Question

我是jQuery的新手，我遇到了麻烦。

首先，我将解释我的问题：

我们正在使用OXID电子商务为在线商店编制网站。在文章列表中，我们要安装一些过滤器。其中一个是价格过滤器。我们读取数据库上的最小最低价格，将其存储在cookie上，让用户选择此过滤器的工作间隔。所以在开始时，所有文章列表都被加载。此列表如下所示：

包含单品的div容器：

在其中，我们将每个产品都放在：

而且，在产品中，我们还有另一个价格的div。

对于每种产品，我们都有不同的ID。

<div id="productList">
  ...
  <div id="test_cntr_1_0015-0001-2250-0186 " class="product">
    ...
    <div class="form_wrapper">
      ...
      <form>
        ...
        <div class="price">1,99 €</div>
        ...
      </form>
      ...
    </div>
  ...
  </div>
...
</div>

里面有一张表格，因为你可以在不详细说明的情况下购买产品。

所以，重点是：

文档准备好后，用户可以设置“价格范围”，jQuery应该隐藏价格不在边界之间的所有产品。边界的值通过cookie读取。

我现在所拥有的是：

$("#productList div.product div.price").each(function (index) {
  // What I should write here ?
}

实际上我一个一个地选择我需要的div，但是，我该如何比较价格呢？我的意思是，访问内部div价格并检查它是否在界限之间，否则，将值更改为隐藏？

假设我们已经在脚本上有了值。

非常感谢！

Answer 1

将data- *属性添加到您的所有div.price中，例如：

<div class="price" data-price-value="1.99" data-price-unit="eur">1,99 €</div>

然后您可以通过以下方式访问：

$("#productList div.product div.price").each(function (index) {
    var data = $(this).data(); // return {priceValue: 1.99, priceUnit: 'eur'} for the example div above
    // check the price range here by using data.priceValue
}

Answer 2

扩展Natthakit Susanthitanon的回答。我假设您已经验证了价格约束输入 -

<input id="upperBound" type="text">
<input id="lowerBound" type="text">

然后你可以这样做 -

$("#productList div.product div.price").each(function (index) {
    var price = $(this).data("price-value");
    var lower = $("#lowerBound").val();
    var upper = $("#upperBound").val();
    if(price >= lower && price <= upper)
        $(this).parents(".product").show();
    else
        $(this).parents(".product").hide();
  });

编辑：重新阅读你的问题。你是如何访问cookie的？如果你需要在jQuery中访问你的cookie，我会推荐Klaus Hartl在Git Hub上的插件（https://github.com/carhartl/jquery-cookie）

使用jQuery根据内部div隐藏div块

2 个答案: