Question

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

类似于查询显示tr，其中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获取滑块的值

更改jquery多标签滑块过滤器表

1 个答案: