具有多個條件的jquery篩選器

我想根據篩選的影響篩選餐館列表。我想用滑塊代替普通的類別，如印度/亞洲/墨西哥/歐洲美食。具有多個條件的jquery篩選器

餐館可以是

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

我會再使用一個通用的JQuery用戶界面滑塊，並從每個滑塊傳遞價值，一個隱藏的元素。

這裏是我完全卡住的地方。我可以得到它利用類而不是JSON（.nospice .somespice .spicy），並做一個if (value >= 7) {$('.spicy').show();}一個滑塊的工作，但我不知道我怎麼會去這樣做更高級的查詢(if x = >=7 AND y = >=3 AND z = >=5)

有人想在這裏把我推向正確的方向嗎？我需要閱讀什麼內容。如果我以非常錯誤的方式解決這個問題，請告訴我。

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

來源

2013-02-03 techii

展您的相關HTML。向我們展示一個實況（最小/ [sscce]（http://sscce.org/））演示，該演示再現了迄今爲止所用的[JS Fiddle演示]（http://jsfiddle.net/）。 –

我到目前爲止是一個非常複雜的混亂，但我會產生一個JSFiddle演示並更新OP。 – techii

好主意，我假設你正在使用這個滑塊：http://jqueryui.com/slider/#colorpicker然後你有一個像辣，大蒜，價格，氛圍等每個類別的滑塊...如果是這樣的情況比我想象的馬特給你你需要使用.each和切換。 – HMR

jQuery有一個.filter方法。我也建議您存儲的餐廳對象使用.data存儲餐館名稱和其輸入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 
})

來源

2013-02-03 11:19:17

嗯，太棒了。我相信這可以工作。即使由於缺乏技能/經驗，我不能100％確定是否能夠實施它，但我會給它一個機會！謝謝。如果有人想在標記此答案之前做出貢獻，請將其再打開10-15分鐘。 – techii

我會如何真正去獲取這些值，並將它們推到四個不同的命名變量，因爲這些滑塊是匿名的。 '$（'。sliders> div'）。each（function（）{$（this）.slider（{* ... *}];）;' – techii

@techii或者給他們一個id或者找出哪個滑塊這是jQuery.each簽名：'callback（indexInArray，valueOfElement）'。所以你可以說'if（indexInArray == 0）{spicyness = $（this）.val（）}'等等。 –

具有多個條件的jquery篩選器

回答

相關問題