Question

我想让我页面上的所有项目从自定义（不均匀）＆＃34;数据步骤＆＃34;中读取各自的步数增量。属性，而不是常规的偶数步模式。

我的HTML标记将如下所示：

<div class="options__wrap">
    <div class="options__slider">
        <input type="range" min="1" max="4" step="1" value="1" id="option__slider__item" data-steps="1,2,5,15">
    </div>
    <div class="options__slider__value">
        <span id="options__slider__value__monitor">0</span>
    </div>
</div>

实现这一目标的最佳方法是什么？在一个完美的世界里，我希望能够直接从现场存储价值，但我认为我也可以满足于阅读和存储最终的输出价值＆＃34;＃options__slider__value__monitor＆＃34;。

Jsfiddle：https://jsfiddle.net/hnm7q4k3/7/

Answer 1

我已尝试根据您的示例创建解决方案这些步骤再次均匀，但代码会在keyup / mouseup上捕捉到正确的步骤。

JsFiddle：https://jsfiddle.net/hnm7q4k3/87/

<div class="options__panel">
  <div class="options__wrap">
    <div class="options__slider">
      <input type="range" min="1" max="15" step="1" value="2" id="option-items" data-steps="1,2,5,15">
    </div>
    <div class="options__value">
      <span>0</span> Item(s)
    </div>
  </div>
</div>

JS

var $elem = $("#option-items");
var initialValue=$elem.val();
var steps=$elem.data('steps').split(',').map(Number);
var stepsReversed=steps.slice().reverse();
var prevValueDataKey='rng-prev';
var printElem=$(".options__value span");

$elem
.data(prevValueDataKey, initialValue)
.val(initialValue)
.on("mouseup keyup", function(evt){
  var $this = $(this);

  //get previous value
  var prev = new Number($this.data(prevValueDataKey));
  var current = new Number($this.val());

  //calculate the number to snap to
  if(current>prev){
     current = steps.find(function(elem){return elem >=current});
  }else if(current<prev){
     current = stepsReversed.find(function(elem){return elem <=current});
  }

  $this
  .data(prevValueDataKey,current)
  .val(current);

  printElem.text(current);
  console.log("snapped to:",current)
})
.trigger("mouseup");//render the span with the initial value

jQuery - 用于从自定义＆＃34;数据步骤＆＃34;中提取步骤的滑块属性

1 个答案: