如何访问当前范围滑块？

Question

我有 2 个范围输入（比如说 100），我想将每个范围的值附加到一个数组中，例如：

   <input id="range1" type="range" max="2">
   <input id="range2" type="range" max="2">

    <script>
    var items=new Array();

    items[1]=new Array("dog","horse","cat");
    items[2]=new Array("x","y","z");

    for (x=1;x<3;x++){
        $('#range'+x).rangeslider({
            polyfill : false,
            onSlideEnd: function(position, value) {
                console.log(items[x][value]);       
            }
        });
    }
    </script>

当前逻辑总是打印 items[2][blah] 值，因为在循环结束时 x=2。我如何访问 rangeslider 内的当前输入（因此提取其 ID）（或者可能在该循环内为每个滑块创建一个局部变量而不是 x 以摆脱全局变量 X）？

Answer 1

你可以像这样获取onSlideEnd事件中的元素和当前值

$(document).ready(function() {
  // you can also use $('*[id^="range-"]').rangeslider({
  $('.range-slider').rangeslider({
    polyfill: false,
    onSlideEnd: function(position, value) {
      // access to the range-input: this.$element
      // the example shows the id of the range element
      console.log(this.$element.attr('id'));
      
      // access to the current value
      console.log(value);
    }
  });
});

.rangeslider { margin-bottom: 35px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>

<input id="range-1" class="range-slider" type="range" max="2" />
<input id="range-2" class="range-slider" type="range" max="2" />
<input id="range-3" class="range-slider" type="range" max="2" />

如何访问当前范围滑块？

How to access to the current range slider?

jquery

arrays

rangeslider