여러 JQuery-UI 슬라이더를 필터로 사용하는 방법
-
12-12-2019 - |
문제
이 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 문에 문제가있는 것으로 보입니다.
해결책
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/
다른 팁
슬라이드 이벤트를 변경하여 변경하여 를 사용할 수 있습니다.
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/