如何访问当前范围滑块？答案

【问题标题】：How to access to the current range slider?如何访问当前范围滑块？
【发布时间】：2020-04-26 20:33:54
【问题描述】：

我有 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。如何访问范围滑块内的当前输入（因此提取其 ID）（或者可能在该循环内为每个滑块创建一个局部变量而不是 x 以摆脱全局变量 X）？

【问题讨论】：

标签： jquery arrays rangeslider

【解决方案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" />

【讨论】：

谢谢。这是访问插件元素的一般方法还是变量“$element”专门用于rangeslider？
该元素只能在此插件中以这种方式访问。开发商也可以考虑为该物业取另一个名字。我不太确定，但我相信可以以元素不可访问的方式构建插件。