Question

我正在尝试根据他们的影响来过滤餐馆列表。我想使用滑块代替印度/亚洲/墨西哥/欧洲菜等通用类别。

餐厅可能

[{restaurant: 
    {name: 'The Apollon',
    thumb: 'apollon.jpg',
    type: 
        [{spicy: 5, type_id: 1}
        {garlic:3, type_id:2}
        {expensive:10, type_id:3}]}
}]

然后我使用通用的JQuery UI滑块并将每个滑块的值传递给隐藏元素。

这是我完全陷入困境的地方。我可以通过利用类而不是JSON（.nospice .somespice .spicy）并执行if (value >= 7) {$('.spicy').show();}来使用一个滑块来工作，但我不确定如何进行更高级的查询{{ 1}}

有人想在这里向我推进正确的方向吗？我需要阅读什么。如果我以极其错误的方式解决这个问题，请告诉我们。

jsfiddle：http://jsfiddle.net/techii/9e2cJ/

Answer 1

jQuery有一个.filter方法。我还建议您使用.data将餐馆对象与div存储在一起以存储餐馆名称和类型及其div：

$(".restaurants > div").filter(function(){
   var info = $(this).data("info");
   // Some code to extract things like spicyness, expensiveness
   // Also some code to get the slider values...
   if (spicynessSliderValue <= spicyness && expensivenessSliderValue <= expensiveness)
   {
       return true;
   }
}).show();

在你的情况下，我会建议使用$.each：

$(".restaurants > div").each(function(){
   ...
   var isMatch = picynessSliderValue <= spicyness && expensivenessSliderValue <= expensiveness;
   $(this).toggle(isMatch); // like .show or .hide, but takes a boolean
})

具有多个条件的Jquery过滤器

1 个答案: