Jquery范围滑块如何创建自己的序列

我正试图用jquery创建一个范围滑块。我有一个适用于数字的滑块和第二个适用于字符串值的滑块。第二个滑块只有在字母顺序正确的情况下才起作用。

当alph=["D"，"E"，"F"，"G"，"H"，"I"，"J"]时，它就完成了任务。但是，当我试图拥有自己的序列，如alph=["F"，"H"，"D"，"G"，"E"，"I"，"J"]时，它的行为并不像我想象的那样。

我如何获得自己的订单？例如alph=["F"、"H"、"D"、"G"、"E"、"I"、"J"]。因此，当我将值滑动到H-J时，表应该显示带有H、D、G、E、I、J的列。

这是javascript代码：

$(window).load(function() {
$(function() {
$( "#slider-range" ).slider({
  range: true,
  step: 0.01,
  min: 0.00,
  max: 2.00,
  values: [ 0.00, 2.00 ],
  slide: function( event, ui ) {
    // in this function we can define what happens when a user changes the     sliders
 $( "#amount" ).val( ui.values[ 0 ].toFixed(2) + " ct" + " - " + ui.values[ 1 ].toFixed(2) + " ct" );
    var table = document.getElementById("table");
    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 == 2) {             // if 3rd column
               if ($(col).html() >= ui.values[ 0 ] && $(col).html() <= ui.values[ 1 ]) {
                   // if in interval
                   $(row).removeClass('slider1Hide').trigger("update");
               } else {
                   $(row).addClass('slider1Hide').trigger("update");
               }
           }
       }  
    }          
  }
});
$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ).toFixed(2) + " ct" +
  " - " + $( "#slider-range" ).slider( "values", 1 ).toFixed(2) + " ct" );

var alph = ["F", "H", "D", "G", "E", "I", "J"];
$( "#slider-range3" ).slider({
  range: true,
  min: 0,
  max: 6,
  values: [ 0 , 6 ],
  slide: function( event, ui ) {
    // in this function we can define what happens when a user changes the sliders
    $( "#amount3" ).val( alph[ui.values[ 0 ]] + " - " + alph[ui.values[ 1 ]] );
    var table = document.getElementById("table");
    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 == 4) {             // if 5th column
               if ($(col).html() >= alph[ui.values[ 0 ]] && $(col).html() <= alph[ui.values[ 1 ]]) {
                   // if in interval
                   $(row).removeClass('slider3Hide').trigger("update");
               } else {
                   $(row).addClass('slider3Hide').trigger("update");
               }
           }
       }  
    }          
  }
});
$( "#amount3" ).val(alph[$( "#slider-range3" ).slider( "values", 0 )] +
  " - " + alph[$( "#slider-range3" ).slider( "values", 1 )] );
});

html表非常基本。它唯一的特别之处在于它有一个id和一个类名。

css仅为：

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

我希望你能理解我的问题。