0

我是 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 €&lt;/div>
        ...
      </form>
      ...
    </div>
  ...
  </div>
...
</div>

里面有一个表格，因为您可以在不了解细节的情况下购买产品。

所以，重点：

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

到目前为止我所拥有的是：

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

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

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

非常感谢 ！

4

2 回答 2

0

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

<div class="price" data-price-value="1.99" data-price-unit="eur">1,99 €&lt;/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
}
于 2013-03-07T17:26:29.917 回答
0

扩展 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）

于 2013-03-08T09:27:15.580 回答