添加范围滑块 [英] Adding range slider
本文介绍了添加范围滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在向商品过滤条件添加第二个滑块时遇到问题.现在有一个滑块和复选框可以过滤产品.但是此刻，我需要添加额外的范围滑块以更加准确地进行过滤.我试图这样做，但是没有任何效果.谢谢您的帮助.
这是jsfiddle示例: https://jsfiddle.net/27zo8eL3/4/
HTML:
<ul class="tabela lokata" id="products">
<li class="tabelki" data-price="10000" data-quality="1" data-category="1 2 3 4 ">max 10 000 USD contains category 1 2 3 4 and quality 1</li>
<li class="tabelki" data-price="12000" data-quality="2" data-category="2 3">max 12 000 USD contains category 2 3 and quality 2</li>
<li class="tabelki" data-price="13000" data-quality="3" data-category="4 5">max 13 000 USD contains category 4 5 and quality 3 </li>
<li class="tabelki" data-price="14000" data-quality="4" data-category="5 6 ">max 14 000 USD contains category 5 6 and quality 4</li>
<li class="tabelki" data-price="12000" data-quality="5" data-category="5">max 12 000 USD contains category 5 and quality 5</li>
<li class="tabelki" data-price="14000" data-quality="6" data-category="1 2">max 14 000 USD contains category 1 2 and quality 6</li>
<li class="tabelki" data-price="16000" data-quality="7" data-category="1 2 3">max 16 000 USD contains category 1 2 3 and quality 7</li>
<li class="tabelki" data-price="20000" data-quality="8" data-category="7 8">max 20 000 USD contains category 7 8 and quality 8</li>
</ul>
JS:
function filterPrice(products) {
let minP = $("#price").slider("values", 0);
let maxP = $("#price").slider("values", 1);
return products.filter(function() {
let value = parseInt($(this).data("price"), 10);
return !(value > maxP || value < minP);
});
}
function filterCheckboxes(products) {
checkboxes = $("input:checked").filter(function() {
return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
}).map(function() {
return this.value;
});
// If no checkboxes are checked, don't filter with them
if (checkboxes.length == 0) {
return products;
}
return products.filter(function() {
categories = $(this).data("category").toString().split(" ");
let val = true;
checkboxes.each(function() {
if (!categories.includes(this[0])) {
val = false;
return;
}
});
return val;
});
}
function filterProducts() {
// Reset filters
products = $("#products li");
products.hide();
products = filterPrice(products);
products = filterCheckboxes(products);
products.show();
let numItems = products.length;
if (numItems > 0) {
label = "We found " + numItems + " offers. ";
} else {
label = "No result found.";
}
$("#found").text(label);
}
$(function() {
var options = {
range: true,
min: 1,
max: 60,
step: 1,
values: [1, 24],
slide: function(event, ui) {
$("#amount2").val(ui.values[0] + " - " + ui.values[1]);
},
change: function(event, ui) {
showProducts();
}
};
$("#quality").slider(options);
$("#amount2").val($("#quality").slider("values", 0) +
" - " + $("#quality").slider("values", 1));
});
$(function() {
let options = {
min: 500,
max: 100000,
step: 500,
values: [10000],
slide: function(event, ui) {
$("#amount").val(ui.values[0] + " USD");
},
change: function(event, ui) {
filterProducts();
}
};
$("input").filter(function() {
return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
}).change(filterProducts);
$("#price").slider(options);
$("#amount").val($("#price").slider("values", 0) + " USD");
});
解决方案
我是自己做的.很简单.
function filterQuality(products) {
let minQ = $("#quality").slider("values", 0);
let maxQ = $("#quality").slider("values", 1);
return products.filter(function() {
let value = parseInt($(this).data("quality"), 9);
return !(value > maxQ || value < minQ);
});
}
I have a problem with adding second slider to the offers filter. There is now one slider and checkboxes to filter products. But at this moment i need to add extra range slider to filter even more accurately. I was trying to do that but nothing works. I would be thankful fo any help.
Here's jsfiddle example: https://jsfiddle.net/27zo8eL3/4/
HTML:
<ul class="tabela lokata" id="products">
<li class="tabelki" data-price="10000" data-quality="1" data-category="1 2 3 4 ">max 10 000 USD contains category 1 2 3 4 and quality 1</li>
<li class="tabelki" data-price="12000" data-quality="2" data-category="2 3">max 12 000 USD contains category 2 3 and quality 2</li>
<li class="tabelki" data-price="13000" data-quality="3" data-category="4 5">max 13 000 USD contains category 4 5 and quality 3 </li>
<li class="tabelki" data-price="14000" data-quality="4" data-category="5 6 ">max 14 000 USD contains category 5 6 and quality 4</li>
<li class="tabelki" data-price="12000" data-quality="5" data-category="5">max 12 000 USD contains category 5 and quality 5</li>
<li class="tabelki" data-price="14000" data-quality="6" data-category="1 2">max 14 000 USD contains category 1 2 and quality 6</li>
<li class="tabelki" data-price="16000" data-quality="7" data-category="1 2 3">max 16 000 USD contains category 1 2 3 and quality 7</li>
<li class="tabelki" data-price="20000" data-quality="8" data-category="7 8">max 20 000 USD contains category 7 8 and quality 8</li>
</ul>
JS:
function filterPrice(products) {
let minP = $("#price").slider("values", 0);
let maxP = $("#price").slider("values", 1);
return products.filter(function() {
let value = parseInt($(this).data("price"), 10);
return !(value > maxP || value < minP);
});
}
function filterCheckboxes(products) {
checkboxes = $("input:checked").filter(function() {
return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
}).map(function() {
return this.value;
});
// If no checkboxes are checked, don't filter with them
if (checkboxes.length == 0) {
return products;
}
return products.filter(function() {
categories = $(this).data("category").toString().split(" ");
let val = true;
checkboxes.each(function() {
if (!categories.includes(this[0])) {
val = false;
return;
}
});
return val;
});
}
function filterProducts() {
// Reset filters
products = $("#products li");
products.hide();
products = filterPrice(products);
products = filterCheckboxes(products);
products.show();
let numItems = products.length;
if (numItems > 0) {
label = "We found " + numItems + " offers. ";
} else {
label = "No result found.";
}
$("#found").text(label);
}
$(function() {
var options = {
range: true,
min: 1,
max: 60,
step: 1,
values: [1, 24],
slide: function(event, ui) {
$("#amount2").val(ui.values[0] + " - " + ui.values[1]);
},
change: function(event, ui) {
showProducts();
}
};
$("#quality").slider(options);
$("#amount2").val($("#quality").slider("values", 0) +
" - " + $("#quality").slider("values", 1));
});
$(function() {
let options = {
min: 500,
max: 100000,
step: 500,
values: [10000],
slide: function(event, ui) {
$("#amount").val(ui.values[0] + " USD");
},
change: function(event, ui) {
filterProducts();
}
};
$("input").filter(function() {
return $.inArray($(this).attr("name"), ['fl-1', 'fl-2', 'fl-3', 'fl-4', 'fl-5', 'fl-6', 'fl-7', 'fl-8']) != -1;
}).change(filterProducts);
$("#price").slider(options);
$("#amount").val($("#price").slider("values", 0) + " USD");
});
解决方案
I did it by myself. Was quite easy.
function filterQuality(products) {
let minQ = $("#quality").slider("values", 0);
let maxQ = $("#quality").slider("values", 1);
return products.filter(function() {
let value = parseInt($(this).data("quality"), 9);
return !(value > maxQ || value < minQ);
});
}
这篇关于添加范围滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
