具有多个条件的Jquery过滤器

本文介绍了具有多个条件的Jquery过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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.

餐厅可能

[{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滑块并将每个滑块的值传递给隐藏元素。

I'd then use a generic JQuery UI slider and pass the value from each slider to a hidden element.

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

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： jsfiddle/techii/9e2cJ/

jsfiddle: jsfiddle/techii/9e2cJ/

推荐答案

jQuery有 .filter 方法。我还建议你使用 .data 用于存储餐馆名称和类型及其div：

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 })