0

我目前正在构建一个基于 div 类和内容的过滤器。

我想知道是否可以将如下字符串传递给函数：“ £0.01 - £100.01”

然后让函数显示所有 div，其中该 div 的 html 在此范围之间

所以说我有一个“价格”类的div，它的内容是：£10.30

从运行此函数并将“ £0.01 - £100.01”字符串传递给它，它将隐藏所有 div，类似于我在下面的 js 中所做的那样，然后只显示 div 的 div 类“价格”的内容在所选价格范围内的位置.

我已经设法用我将在这里提供的品牌过滤器做了类似的事情：

function brand(string){
    var brand = string;
    $('.section-link').hide();
    $('.section-link').children('.brand.' + brand).parent().show();
    if (brand == "All Brands"){
        $('.section-link').show();
    }
}

非常感谢任何一般性建议或代码来帮助实现这一目标:)

谢谢，西蒙

编辑：

目标 div 示例：

<div class="section-link">
<div class="price"> £56.99</div>
</div>

回复很有帮助，过滤器功能看起来很棒，所以感谢您指出这一点。

我只是想找到一种方法将过去的初始字符串拆分为两个值，一个低一个高，同时去掉 £ 符号

编辑：

设法拆分原始字符串：

var range = string.replace(/\u00A3/g, '');
var rangearray = range.split("-");
alert(rangearray[0]);
alert(rangearray[1]);

最终编辑：

从回复中我已经能够制作一个功能，但是它并不完全有效:) 任何人都可以发现我做错了什么吗？

function price(string){
    $('.section-link').hide();
    var range = string.replace(/\u00A3/g, '');
    var rangearray = range.split("-");
    low = rangearray[0];
    high = rangearray[1];

     $('.section-link').children('.price').each(function() {
        var divprice = $(this).text().replace(/\u00A3/g, '');
        if (low <= divprice && high >= divprice){
             $(this).parent().show();
        }
    })
}

好的，它的工作，我的字符串中有空格。最后的功能（虽然很乱：P）是：

function price(string){
    $('.section-link').hide();
    var range = string.replace(/\u00A3/g, '');
    var rangearray = range.split("-");
    low = rangearray[0].toString();
    high = rangearray[1].toString();
    lowmain = low.replace(/ /g,'');
    highmain = high.replace(/ /g,'');

     $('.section-link').children('.price').each(
        function() {
            var divprice = $(this).text().replace(/\u00A3/g, '');
            var maindivprice = divprice.replace(/ /g,'');

            if (lowmain <= maindivprice && highmain >= divprice){
                $(this).parent().show();
        }
    })
}
4

4 回答 4

2

我会使用像这样的函数，range你给的字符串在哪里

function highlightDivs(range) {
     var lower = range.split(" ")[0].slice(1);
     var upper = range.split(" ")[2].slice(1);

     $('.section-link').hide();
     $('.section-link').children('.price').each(function() {            
        if (lower <= $(this).val() && upper >= $(this).val()){
             $(this).parent().show();
         }
    });
}
于 2013-07-22T12:43:19.080 回答
1

您可以使用 jQuery 内置的 filter() 函数，并使用您描述的条件编写一个过滤器。

首先，您应该隐藏所有价格不菲的商品。

$(".price").parent().hide();

然后，您可以过滤所有价格范围内的商品并显示它们：

$(".price").filter(function(){
    var $this = $(this);
    var value = $this.val();
    return (value >= minNumber && value <= maxNumber); // returns boolean - true will keep this item in the filtered collection

}).parent().show();
于 2013-07-22T12:32:24.557 回答
1

使用 jQuery 的 filter()

一个例子-> http://jsfiddle.net/H6mtY/1/

var minValue = 0.01,
    maxValue = 100.01;

var filterFn = function(i){
    var $this = $(this);

    if($this.hasClass('amount')){

        //    assume that text is always a symbol with a number
        var value = +$this.text().match(/\d+.?\d*/)[0];

        if(value > minValue && value < maxValue){
            return true;
        }
    }
    return false;
};

//    apply your filter to body for example
$('#target span')
.filter(filterFn)
.each(function(i,ele){

    // do something with the selected ones
    $(this).css('color','red');
});
于 2013-07-22T12:48:38.243 回答
0

我会像这样：

  1. 获取所有有价格的 div。
  2. 遍历所有：
    1. 将字符串（减去井号）转换为浮点数，如果它们在提供的范围内，则与 IF 语句进行比较。
    2. 如果他们只是去下一个（使用继续也许）
    3. 否则（不在范围内）添加一个像.hide这样的类，以便它可以通过 css 混合（或者只使用 jquery 中的混合函数）
于 2013-07-22T12:38:07.590 回答