Question

我正在尝试使用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;
}

我希望你理解我的问题。

Answer 1

我通过使用不同的方法找到了解决方案。我的第一篇文章中的代码仅适用于具有正确顺序的数组（例如，a，bc，... z或hello1，hello2，... hellon）或者如果使用带有单个拖动句柄的滑块。

但是如果你想要自己的订单呢？

我使用了正常范围滑块，使用数字的滑块，我使用CSS将数字转换为字母。

这不是最美丽的方法，但我终于开始工作了。

Jquery Range Slider如何创建自己的序列

1 个答案: