Question

我有代码创建动态滑块供用户选择频率（从118.000 Mhz到136.975 Mhz）。此列表是动态的，因此用户可以添加或删除频率（及其滑块）。但我有两个问题：

步骤不起作用。它适用于'15'或更高，但低于此值，步骤不起作用。如果我使用'10'，则步骤变为20.如果我选择5作为步骤（这是我需要的值），则相同。
我不能让键盘输入工作！我可以使用静态代码（例如：静态div，值等），但不能使用这个动态代码。此外，键盘输入有两个问题。
- 它总是移动列表的最后一项（可能是因为'I'，在事件中不存在......但我不知道如何解决/修复它。）
- 该值始终滑动到滑块的最大值或最小值。如果我键入->，则滑块移动到最大值。如果我输入<-，则滑块移动到最小值。

任何提示？

var freqs = ["118000", "119550", "121725"];
for (var i = 0; i < freqs.length; i++) {

  var $last = $('#freq_table').find('tbody').append("<tr><td class='col-md-2' id='value_freq_" + i + "'>oi</td><td class='col-md-8 center slider' id='td_slider_" + i + "'><div id='slider_" + i + "'></div></td></tr>");

  var tmp = noUiSlider.create($('#slider_' + i).get(0), {
    start: freqs[i],
    step: 10,
    range: {
      'min': 118000,
      'max': 136975
    },
    format: wNumb({
      decimals: 3,
      thousand: '.'
    }),
  }).on('update', function(values, handle) {
    var id = this.target.id.slice(-1);
    $('#value_freq_' + id).html(values[handle] + ' Mhz');
    freqs[id] = values[handle];
  });
  var item = $('#slider_' + i).get(0);
  var handle = item.querySelector('.noUi-handle');

  handle.addEventListener('keydown', function(e) {

    var value = Number(item.noUiSlider.get());

    if (e.which === 37) {
      item.noUiSlider.set(value - 10);
    }

    if (e.which === 39) {
      item.noUiSlider.set(value + 10);
    }
  });

};

Answer 1

您遇到的问题归因于wNumb选项decimals: 3会影响.get()处理程序中的keydown值。实际上，它返回值除以1000.要解决此问题，在调用.get()之后，您需要在添加/减去5（或任何步长值）之前将值重新乘以1000。

我注意到的另一个问题是，keydown事件仅绑定到for循环中的最后一个滑块，无论您使用鼠标单击/滑动哪个滑块。原因是因为item事件中keydown的值始终为#slider_2（2来自最后一次循环迭代）。要解决此问题，请使用以下语句var slider = $(this).closest('.noUi-target')[0];将变量分配给刚刚单击的滑块。

一些UX增强功能

您可以通过单击旁边的标签激活滑块，然后使用键盘移动滑块。
使用滑块步长为5的键盘会非常缓慢地移动滑块。所以我添加了一个加速器计算，增加了滑块的速度，按键保持按下的时间越长，释放时重置。这使得键盘具有完整的粒度而不会非常缓慢。

＆＃13;

var freqs = ["118000", "119550", "121725"];
var stepSize = 5; // stepSize for the slider and arrow key increments

// Populate sliders by looping the freqs array
for (var i = 0; i < freqs.length; i++) {

  // Append label and slider to table
  var $last = $('#freq_table').find('tbody').append("<tr><td class='col-md-2' id='value_freq_" + i + "'>oi</td><td style='' class='col-md-8 center slider' id='td_slider_" + i + "'><div id='slider_" + i + "'></div></td></tr>");

  // Create the noUiSlider
  var tmp = noUiSlider.create($('#slider_' + i).get(0), {
    start: freqs[i],
    step: stepSize,
    range: {
      'min': 118000,
      'max': 136975
    },
    format: wNumb({
      decimals: 3,
      thousand: '.'
    }),
  }).on('update', function(values, handle) {
    var id = this.target.id.slice(-1);
    $('#value_freq_' + id).html(values[handle] + ' Mhz');
    freqs[id] = values[handle]; // Update the freqs array with new slider value
  });

  var item = $('#slider_' + i).get(0);
  var handle = item.querySelector('.noUi-handle');
  var keydownIteration = 1; // track iterations of keydown until keyup.  To be used for slider acceleration.

  // Add keyboard event to the slider handle
  handle.addEventListener('keydown', function(e) {
    var slider = $(this).closest('.noUi-target')[0];
    var value = Number(slider.noUiSlider.get()) * 1000;
    var multiplier = Math.floor(keydownIteration/10) + 1; // multiplier will be used to calculate slider acceleration

    if (e.which === 37) {
      slider.noUiSlider.set(Math.trunc(value - stepSize*multiplier));
    }

    if (e.which === 39) {
      slider.noUiSlider.set(Math.trunc(value + stepSize*multiplier));
    }

    keydownIteration++; // increment counter 
  });

  // Add keyboard event to the slider handle
  handle.addEventListener('keyup', function(e) {
    keydownIteration = 1; // resetting the iteration also resets accelaration
  });

};

// When clicking on the label, focus and click the slider
$('#freq_table').on('click', 'td:first-child', function () {
  $(this).closest('tr').find('.noUi-handle').focus().click();
});

＆＃13;

#freq_table  td:nth-child(2) {
  width : 300px;
}

#freq_table  td:first-child {
  cursor : pointer;
}

#freq_table td {
  padding : 10px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="freq_table">
  <thead>
  </thead>
  <tfoot>
  </tfoot>
  <tbody>
  </tbody>
</table>

＆＃13;

步骤不在noUISlider中工作

1 个答案: