jquery多标签滑块过滤表上的变化 [英] jquery multiple label slider filter table on change

问题描述

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

jsfiddle link : http://jsfiddle.net/u9gpsb8h/20/ i want to filter table based on jquery label slider .

类似查询show tr where td1

something like query show tr where td1

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

i have two slider 1 and 2, now i want to filter table based on slider value slider 1 represents filter a and slider 2 represents filter b.

问题是我的代码工作正常，当只有当前标签

Problem is that my code works fine when for current label only

下面是我的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();
               }
           }
       }  
        }          
      }
      });
  });

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

how can i sort table based on slider value i am newbie pls guide me to do this

推荐答案

为了让过滤器一起工作而不会相互竞争，您需要为每个滑块使用特定的显示/隐藏指示器，而不是.show（）和.hide（），因为它是每一个都会覆盖另一个。

To get the filters to work together and not compete with each other, you will want to use a specific show/hide indicator for each slider, rather than .show() and .hide(), as it is, each one will overwrite the other.

所以 Slider A 会过滤结果， Slider B 会进一步过滤这些结果，而不是重置。

So Slider A will filter results, and Slider B will further filter those results, rather than reset.

添加到您的CSS：

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

对于JavaScript：

And for the 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获取滑块的值通过使用 ui.value 而不是 jQuery（'＃slider1'）。slider（'value'）

Also as a side note, you can get the value of the slider from the ui in the slide callback by using ui.value rather than jQuery('#slider1').slider('value')

这篇关于jquery多标签滑块过滤表上的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！