여러 JQuery-UI 슬라이더를 필터로 사용하는 방법

Question

이 JSFIDDLE "nofollow"> http://jsfiddle.net/danieltulp/gz5gn/ 내가하고 싶은 것은 약 6 개의 슬라이더가있는 데이터 속성에 대한 정렬되지 않은 목록입니다.그러나 나의 개발을 위해서 나는 두 개의 를 사용하고 있습니다.

첫 번째 질문 : 품질 슬라이더가 잘 작동하지만 가격 슬라이더를 미끄러 낼 때 minp 및 maxp 변수를 객체로 표시합니다. 왜?어떻게 해결할 수 있습니까?

두 번째 질문 : 내 코드는 이제 preitty messy, 각 필터 (예 : 가격, 품질 등)에 특정 코드를 작성해야합니다 (예 : 가격, 품질 등), 어떻게 코드를 단순화 / 단축 할 수 있습니까?

코드의 코드 :

html

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
<div class="demo">
    price<br />
    <div id="price"></div>
    quality<br />
    <div id="quality"></div>
    <ul id="products">
        <li data-price="10" data-quality="20"> product - £10 q20</li>
        <li data-price="50" data-quality="40"> product - £50 q40</li>
        <li data-price="100" data-quality="80"> product - £100 q80</li>
        <li data-price="150" data-quality="30"> product - £150 q30</li>
        <li data-price="200" data-quality="40"> product - £200 q40</li>
    </ul>
</div>

.

자바 스크립트

function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 250,
        values: [0, 250],
        slide: function(event, ui) {
            if(event.target.id = "price"){
                var minP = ui.values[0],
                      maxP = ui.values[1],
                      minQ = $("#quality").slider("values", 0),
                      maxQ = $("#quality").slider("values", 1);
             }
            if(event.target.id = "quality"){
                var minP = $("#price").slider("values", 0),
                      maxP = $("#price").slider("values", 1),
                       minQ = ui.values[0],
                       maxQ = ui.values[1];
              }
              alert(minP +", "+ maxP +", "+ minQ +", "+ maxQ);
              showProducts(minP, maxP, minQ, maxQ);
          }
      };

     $("#price").slider(options);
     $("#quality").slider(options);
  });

.

편집 : MIN MAX 변수의 첫 번째 문제는 가격을 위해 하나 이상의 품질의 IF 문을 이동하면 품질 슬라이더에도 발생합니다.가격 값이 정확합니다.따라서 슬라이드 기능의 IF 문에 문제가있는 것으로 보입니다.

Answer 1

Filter.js 라는 매우 편리한 jQuery 플러그인이 나타납니다.

demo : http://jiren.github.com/filter.js/filterjs.html

github : https://github.com/jiren/filter.js 자습서 : http://blog.joshsoftware.com/2011/09/28/filter-js-client-side-search-filtering-using-json-and-jquery/

Answer 2

슬라이드 이벤트를 변경하여 변경하여 를 사용할 수 있습니다.

change: function(event, ui) {
        var minP = $("#price").slider("values", 0);
        var maxP = $("#price").slider("values", 1);
        var minQ = $("#quality").slider("values", 0);
        var maxQ = $("#quality").slider("values", 1);
        showProducts(minP, maxP, minQ, maxQ);
    }

.

슬라이드 이벤트가 슬라이드 이벤트가 트리거 될 때 슬라이드 이벤트를 사용하여 슬라이드 이벤트를 사용하여 슬라이드 이벤트가 트리거되므로 실제 마우스로 작동하는 방법을 모르겠습니다. http://jqueryui.com/demos/slider/#event-slide for를 참조하십시오 추가 정보

작업 JSFIDDLE. http://jsfiddle.net/danieltulp/gz5gn/42/

이제는 여전히 코드를 단순화 / 단축해야합니다

---

편집 :

나는 적어도 명확한 코드를 만들기위한 아이디어가있다

먼저 slidervalue가 증가했는지 여부를 판별해야합니다. 그 다음에만 표시되거나 숨겨진 목록 항목 만 숨기거나 표시 할 수 있도록 필터링 할 수 있습니다

이렇게하면 이미 필터링 된 목록 항목 만 효과적으로 숨길 필요가 없으므로 이전 코드에서 수행 할 때 다시 숨길 필요가 없습니다

하지만 내 JSFiddle은 내 코드에서 무언가를 깰 수 있지만 좁힐 수는 없습니다. 어떤 아이디어가 있습니까? "Rel="nofollow"> http://jsfiddle.net/danieltulp/4uf3e/4/