jquery多標籤滑塊過濾器表變更

Question

jsfiddle鏈接：http://jsfiddle.net/u9gpsb8h/20/ 我想基於jquery標籤滑塊過濾表。

類似的查詢顯示TR其中TD1

我有兩個滑塊1和2，現在我想根據滑塊值滑塊進行過濾表表示過濾器和滑塊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：

而對於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')