Jquery Range Slider独自のシーケンスを作成する方法

Question

jqueryで範囲スライダを作成しようとしています。私は動作する数字のための1つのスライダと文字列値を持つ2番目のスライダを持っています。 2番目のスライダは、アルファベット順が正しい場合にのみ機能します。

alph = ["D"、 "E"、 "F"、 "G"、 "H"、 "I"、 "J"]のときはジョブを実行します。しかし、私がアルファ= ["F"、 "H"、 "D"、 "G"、 "E"、 "I"、 "J"]のような自分のシーケンスを持っていれば、思ったように振る舞いませんそれはそのようになります。

私はどのように注文しますか？例えば、alph = ["F"、 "H"、 "D"、 "G"、 "E"、 "I"、 "J"]。私はHJに値をスライドときに、テーブルは、ここで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; 
} 

私はあなたが私の質問を理解してほしいです。

Answer 1

私は解決策を別の方法で見つけました。私の最初の投稿のコードは、正しい順序（たとえば、a、b c、... zまたはhello1、hello2、... hellon）を持つ配列に対してのみ、または単一のドラッグハンドルでスライダを使用する場合にのみ機能します。

しかし、自分の注文をしたいのですが？

通常の範囲のスライダを使用しました。数字の範囲を使用するスライダを使用し、CSSを使用して数値を文字に変換しました。

これは最も美しい方法ではありませんが、ついにそれが機能しました。