按两个其他值之间的属性值过滤元素

Question

我想按两个其他值之间的属性值 data-price =“” 过滤元素。我在价格范围内使用jquery ui滑块。

HTML：

<div class="content" data-price="500">500</div>
<div class="content" data-price="600">600</div>
<div class="content" data-price="700">700</div>
<div class="content" data-price="800">700</div>
<div class="content" data-price="900">900</div>
<div class="content" data-price="1000">1000</div>
<div class="content" data-price="5000">5000</div>
<div class="content" data-price="10000">10000</div>

使用Javascript：

$(function() {
$( "#slider" ).slider({
            range:true,
           min: 0,
           max: 20000,
           values: [ 500, 20000 ],
           slide: function( event, ui ) {
              $( "#price" ).val( "€" + ui.values[ 0 ] + " - €" + ui.values[ 1 ] ); 
           },

           //if(i.values[ 0 ] < data-price < i.values[ 1 ]){
           //     show filtered element
           //} else { hide the rest }
        });
});

当我尝试在控制台中打印$（“。content”）时，我只看到第一个元素。

Answer 1

您可以使用jQuery过滤器功能，例如

var min = 700;
var max = 1000;

$('.content').filter(function(){
  return $(this).data('price') < min || $(this).data('price') > max;
}).hide();