2013-02-03 2 views
2

영향을 기반으로 레스토랑 목록을 필터링하려고합니다. 인도/아시아/멕시코/유럽 요리와 같은 일반적인 카테고리 대신 슬라이더를 사용하고 싶습니다.여러 기준을 사용하는 Jquery 필터

레스토랑은 그때 일반적인 JQuery와 UI 슬라이더를 사용하여 숨겨진 요소에 각 슬라이더에서 값을 전달할 것

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

수 있습니다.

여기 내가 완전히 갇혀있다. 내가 대신 JSON의 클래스를 사용하는 (.nospice .somespice .spicy)와 if (value >= 7) {$('.spicy').show();}을 수행하여 하나 개의 슬라이더를 작동시킬 수는 없지만, 내가 더 고급 쿼리 (if x = >=7 AND y = >=3 AND z = >=5)

을하기에 관하여 가고 싶어요 방법을 잘 모르겠어요 누군가가 나를 올바른 방향으로 밀어주고 싶습니까? 나는 무엇을 읽을 필요가있다. 제가 환상적으로 잘못된 방향으로 나아가고 있다면, 제발 들려주세요.

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

+0

쇼 : 나는 그러나 $.each을 사용하는 것이 좋습니다 것입니다 귀하의 경우에는

$(".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(); 

: 나는 또한 레스토랑의 이름을 저장하고 사업부와 입력 .data를 사용하여 DIV 당신이 레스토랑 객체를 저장하는 것이 좋습니다 것입니다 관련 HTML. [JS Fiddle demo] (http://jsfiddle.net/)를 통해 지금까지 얻은 것을 재현하는 라이브 (최소/[sscce] (http://sscce.org/)) 데모를 보여주십시오. –

+0

필자가 지금까지 가지고있는 것은 매우 엉망진창이지만 JSFiddle 데모를 생성하고 OP를 업데이트 할 것입니다. – techii

+0

위대한 아이디어,이 슬라이더를 사용하고 있다고 가정합니다. http://jqueryui.com/slider/#colorpicker 그럼 매운맛, 마늘, 가격, 분위기와 같은 각 카테고리의 슬라이더가 있습니다. 매트는 당신이 필요로하는 것을 당신에게주었습니다. 각각의 토글. – HMR

답변

2

jQuery를 .filter는 방법이있다.

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

흠, 환상적입니다. 이것이 효과가있을 것이라고 확신합니다. 나는 기술/경험이 부족하기 때문에 구현할 수 있지만 100 % 확신하지는 못한다. 고맙습니다. 누구든지이 답변을 표시하기 전에 기고하기를 원한다면 10-15 분 더 열어 둡니다. – techii

+0

실제로 어떻게 값을 가져 와서이 슬라이더를 익명으로 사용하면 네 개의 별개의 명명 된 변수로 푸시 할 수 있습니까? – techii

+0

@techii 아이디를 주거나 슬라이더를 찾아 내면됩니다. ($ ('. 슬라이더> div'). 'indexInArray == 0 {spicyness = $ (this)} .val()}'등을 말할 수 있습니다. jQuery.each의 서명은'callback (indexInArray, valueOfElement)'입니다. –

관련 문제