更改jquery多标签滑块filter表

jsfiddle链接 ： http ： //jsfiddle.net/u9gpsb8h/20/我想基于jquery标签滑块过滤表。

像查询显示tr在哪里td1

我有两个滑块1和2，现在我想基于滑块值过滤表滑块1表示filtera，滑块2表示filterb。

问题是我的代码只适用于当前标签

下面是我的js代码

$(function() { $( "#slider1" ).slider({ value: 20, min:0, max:20, orientation: "horizontal", range: "min", animate: true, slide: function( event, ui ) { $('#s1').html(jQuery('#slider1').slider('value')); // in this function we can define what happens when a user changes the sliders var table = document.getElementById("theTable"); for (var i = 1, row; row = table.rows[i]; i++) { //iterate through rows (we SKIP the first row: counter starts at 1!) for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns: if first column not in range: HIDE, else SHOW if (j == 0) { // if first column if ($(col).html() <= jQuery('#slider1').slider('value')) { // if in interval $(row).show(); } else { $(row).hide(); } } } } } }); $( "#slider2" ).slider({ value: 20, min:0, max:20, orientation: "horizontal", range: "min", animate: true, slide: function( event, ui ) { $('#s2').html(jQuery('#slider2').slider('value')); // in this function we can define what happens when a user changes the sliders var table = document.getElementById("theTable"); for (var i = 1, row; row = table.rows[i]; i++) { //iterate through rows (we SKIP the first row: counter starts at 1!) for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns: if first column not in range: HIDE, else SHOW if (j == 1) { // if first column if ($(col).html() <= jQuery('#slider2').slider('value')) { // if in interval $(row).show(); } else { $(row).hide(); } } } } } }); }); 

我如何根据滑块值对表进行排序我是新手请指导我这样做

Answer 1

为了让filter协同工作而不是相互竞争，你需要为每个滑块使用特定的显示/隐藏指示器，而不是.show（）和.hide（），因为每个滑块都会覆盖其他。

因此， Slider A将过滤结果， Slider B将进一步过滤这些结果，而不是重置。

将其添加到您的CSS：

 .slider1Hide{ display:none; } .slider2Hide { display:none; } 

对于JavaScript：

 $(function () { $("#slider1").slider({ value: 20, min: 0, max: 20, orientation: "horizontal", range: "min", animate: true, slide: function (event, ui) { $('#s1').html(jQuery('#slider1').slider('value')); // in this function we can define what happens when a user changes the sliders var table = document.getElementById("theTable"); for (var i = 1, row; row = table.rows[i]; i++) { //iterate through rows (we SKIP the first row: counter starts at 1!) for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns: if first column not in range: HIDE, else SHOW if (j === 0) { // if first column if ($(col).html() <= ui.value) { // if in interval $(row).removeClass('slider1Hide'); } else { $(row).addClass('slider1Hide'); } } } } } }); $("#slider2").slider({ value: 20, min: 0, max: 20, orientation: "horizontal", range: "min", animate: true, slide: function (event, ui) { $('#s2').html(jQuery('#slider2').slider('value')); // in this function we can define what happens when a user changes the sliders var table = document.getElementById("theTable"); for (var i = 1, row; row = table.rows[i]; i++) { //iterate through rows (we SKIP the first row: counter starts at 1!) for (var j = 0, col; col = row.cells[j]; j++) { //iterate through columns: if first column not in range: HIDE, else SHOW if (j == 1) { // if first column if ($(col).html() <= ui.value) { // if in interval $(row).removeClass('slider2Hide'); } else { $(row).addClass('slider2Hide'); } } } } } }); }); 

另外作为旁注，您可以使用ui.value而不是jQuery('#slider1').slider('value')从幻灯片回调中的ui获取滑块的值jQuery('#slider1').slider('value')