Javascript 如何使用两个Ui范围滑块对相同的数据进行排序

我是新来的。很高兴认识你。我希望你能问一下我自己解决不了的问题

我正在尝试使用UI范围滑块对一些数据进行排序。我想先对价格进行排序，然后在对商品进行排序时，我想根据它们的质量对它们进行排序。但有一个问题。当第一个分拣操作正确完成时，第二个分拣操作不起作用。我无法找出我的代码有什么问题。我是JS的新手。我还没有找到任何答案。我正在使用JQuery和UI

请帮忙

<p>
<label for="amount">Price</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div class="slider" id="price"></div>
</p>

<p>
<label for="amount2">Quality</label>
<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div class="slider" id="quality"></div>
</p>

<ul id="products">
<li data-price="10" data-quality="1"> product - 10 zł q1</li>
<li data-price="50" data-quality="3"> product - 50 zł q3</li>
<li data-price="100" data-quality="6"> product - 100 zł q6</li>
<li data-price="150" data-quality="12"> product - 150 zł q12</li>
<li data-price="200" data-quality="24"> product - 200 zł q24</li>
</ul>

价格


品质


产品-10 złq1
产品-50 złq3
产品-100 złq6
产品-150 złq12
产品-200 złq24

和脚本：

<script>
function showProducts(minQ, maxQ) {
$("#products li").filter(function() {
var quality = parseInt($(this).data("quality"), 10);
if(quality >= minQ && quality <= maxQ){
$(this).removeClass('slider1Hide');
} else {
$(this).addClass('slider1Hide');
}
});
}


$(function() {
var options = {
range: true,
min: 1,
max: 36,
step: 1,
values: [3, 24],
slide: function( event, ui ) {
$( "#amount2" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );
},
change: function(event, ui) {
var minQ = $("#quality").slider("values", 0);
var maxQ = $("#quality").slider("values", 1);
showProducts(minQ, maxQ);
}

};

$("#quality").slider(options);
$( "#amount2" ).val( $( "#quality" ).slider( "values", 0 ) +
" - " + $( "#quality" ).slider( "values", 1 ) );
});


</script>

<script>
function showProducts(minP, maxP) {
$("#products li").filter(function() {
var price = parseInt($(this).data("price"), 10);
if(price >= minP && price <= maxP){
$(this).removeClass('slider1Hide');
} else {
$(this).addClass('slider1Hide');
}
});
}


$(function() {
var options = {
range: true,
min: 0,
max: 250,
step: 1,
values: [100, 200],
slide: function( event, ui ) {
$( "#amount" ).val(ui.values[ 0 ] + " zł - " + ui.values[ 1 ] + " zł" );
},
change: function(event, ui) {
var minP = $("#price").slider("values", 0);
var maxP = $("#price").slider("values", 1);
showProducts(minP, maxP);
}

};

$("#price").slider(options);
$( "#amount" ).val( $( "#price" ).slider( "values", 0 ) +
" zł - " + $( "#price" ).slider( "values", 1 ) + " zł" );
});


</script>

功能展示产品（minQ、maxQ）{
$（“#产品li”）.filter（函数（）{
var quality=parseInt（$（this）.data（“quality”），10）；
如果（quality>=minQ&&quality=minP&&price，问题是一个滑块的修改正在删除另一个滑块添加的类。要使其工作，您需要在滑块移动后启动两个更新

因此，以下是我如何使其工作的：

我合并了两个
showProducts（）
函数，只得到一个，没有参数。

恢复每个滑块的最小值和最大值并用于过滤。

我还创建了一个
data\u filter（）
函数来简化过滤，并避免重复代码

以下是一个片段：


//添加了此函数
函数数据过滤器（最小、最大、数据名称）{
$（“#产品li”）.filter（函数（）{
var value=parseInt（$（this）.data（data_name），10）；
如果（值>最大值| |值<最小值）{
$（this.addClass（'slider1Hide'）；
}
});
}
函数showProducts（）{
//重置过滤器
$（“#产品li”）.removeClass（'slider1Hide'）；
//价格
var minP=$（“#价格”）.slider（“值”，0）；
var maxP=$（“#价格”）。滑块（“值”，1）；
data_filter（minP，maxP，“price”）；//调用新函数
//品质
var minQ=$（“#质量”）.slider（“值”，0）；
var maxQ=$（“#质量”）。滑块（“值”，1）；
data_filter（minQ，maxQ，“quality”）；//调用新函数
}
//在这下面，没有变化
$（函数（）{
变量选项={
范围：对，
民:1,，
最高：36，
步骤：1，
值：[3,24]，
幻灯片：功能（事件、用户界面）{
$（“#amount2”）.val（ui.values[0]+“-”+ui.values[1]）；
},
更改：功能（事件、用户界面）{
展示产品（）；
}
};
$（“#质量”）。滑块（选项）；
$（“#数量2”）.val（$（“#质量”）.slider（“值”，0）+
“-”+$（“#质量”）。滑块（“值”，1）；
});
$（函数（）{
变量选项={
范围：对，
分:0,，
最高：250，
步骤：1，
值：[100200]，
幻灯片：功能（事件、用户界面）{
$（“#金额”）.val（ui.values[0]+“zł-”+ui.values[1]+“zł”）；
},
更改：功能（事件、用户界面）{
展示产品（）；
}
};
美元（“#价格”）。滑块（选项）；
$（“#金额”）.val（$（“#价格”）.slider（“值”，0）+
“z-”+$（“价格”）。滑块（“值”，1）+“z”）；
})；
.slider1Hide{
显示：无；
}

价格
品质

产品-10 złq1
产品-50 złq3
产品-100 złq6
产品-150 złq12
产品-200 złq24
在
p
标签中不应该有
div
、
标签或
输入。如果你想有一个容器来容纳所有这些，就使用
div
。你也应该共享一些CSS，这样我们就可以有一个工作（而且很好）的snippet.Right.这是小提琴，没问题，我已经回答了你。你应该使用小提琴中的
tidy
按钮。缩进很有用。：）谢谢你的帮助，但这不是我需要的。当价格范围在示例70-115和质量范围3-24中时，我不想看到价值200[zł]的产品“价格”，甚至它的质量也在第二个滑块的范围内。看起来第二个滑块只能工作。有什么想法吗？我的意思是第一个滑块应该更强大。太棒了！我怎么能在这里对你的技能进行投票呢？如果我以后在@Łukasz的脚本上遇到任何问题，我肯定会联系你。我认为你只能在15以上的声誉上投票。但无论如何，你可以接受我的建议如果你的问题就此结束，请回答。：）我将把你加入我的“观察名单”；因此，如果你发布一个新问题，我可能会在那里！嗨，塔基特。你能帮我处理一些UiSlider案例吗？