问题
I am trying to filter a list of restaurant's based on their influences. I would like to use sliders instead of generic categories like Indian/Asian/Mexican/European cuisine.
A restaurant could be
[{restaurant:
{name: 'The Apollon',
thumb: 'apollon.jpg',
type:
[{spicy: 5, type_id: 1}
{garlic:3, type_id:2}
{expensive:10, type_id:3}]}
}]
I'd then use a generic JQuery UI slider and pass the value from each slider to a hidden element.
Here is where I am utterly stuck though.
I can get it to work on one slider by utilizing classes instead of JSON( .nospice .somespice .spicy ) and doing an if (value >= 7) {$('.spicy').show();}
, but I'm not sure how I'd go about doing more advanced queries (if x = >=7 AND y = >=3 AND z = >=5)
Does someone want to nudge me in the right direction here? What do I need to read up on. If I am going about this in a fantasticly wrong way, please do tell.
jsfiddle: http://jsfiddle.net/techii/9e2cJ/
回答1:
jQuery has a .filter method. I would also recommend that you store the restaurant object with the div using .data to store the restaurant name and type with its 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();
In your case I would suggest using $.each however:
$(".restaurants > div").each(function(){
...
var isMatch = picynessSliderValue <= spicyness && expensivenessSliderValue <= expensiveness;
$(this).toggle(isMatch); // like .show or .hide, but takes a boolean
})
来源:https://stackoverflow.com/questions/14671821/jquery-filter-with-multiple-criteria