jquery多标签滑块过滤表更改

Question

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

类似于 query show tr where td1

我有两个滑块 1 和 2，现在我想根据滑块值过滤表格滑块 1 代表过滤器 a，滑块 2 代表过滤器 b。

问题是我的代码仅适用于当前标签时工作正常

下面是我的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

为了让过滤器协同工作而不相互竞争，您需要为每个滑块使用特定的显示/隐藏指示器，而不是每个滑块都使用 .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 中获取滑块的值