Question

我正在构建一个Angular2 Slider组件，当前的设置是滑块的值是一个百分比（基于滑块手柄从0％到100％的位置）。我有一个n项的数组，并希望滑块根据百分比（句柄所在的位置）从数组中获取相应的索引。

这是我当前的拖动事件（当用户拖动滑块手柄时触发）：

handleDrag(evt, ui) {
    let maxWidth = $('#slideBar').width() - 15;
    let position = $('#slideHandle').css('left');
    position = position.replace('px', '');
    let percent = (+position / +maxWidth) * 100;
    this.year = percent;
  }

这个百分比工作正常，但我想知道我应该如何构建algorithem以按百分比获取数组索引。所以，如果我是50％，如果数组长度为146，我想获取数组索引73。

使用JavaScript有更简单的方法吗？我做了一个类似的组件，我做了一个表方法，但想找到一种方法来做到这一点，而无需在页面中添加'helper html elements'。

Answer 1

您的方法听起来不错，因此可以通过使用数组的.length属性来获取索引，如下所示：

var actualndex = Math.floor((array.length-1) * percentage);

// Where percentage is a value between 0 and 1

这应该返回0到array.length-1之间的索引，具体取决于百分比值。

Answer 2

发现一个有类似问题的帖子，算法看起来像这样（任何作品）：

handleDrag(evt, ui) {
    let maxWidth = $('#slideBar').width() - 15;
    let position = $('#slideHandle').css('left');
    position = position.replace('px', '');
    let percent = (+position / +maxWidth) * 100;
    let index = Math.round((percent / 100) * (this.years.length - 1));
    this.year = this.years[index];
  }

思考过程是否合适（通过使用百分比来获取索引）？是否有更好或更推荐的方法？

从百分比获取数组索引？

2 个答案: