修复多个范围 slider 输入的 JavaScript 代码

Question

我无法在单个页面上使用多个范围 slider 。所有输入仅更改页面的第一个输出。

示例位于以下链接。

http://codepen.io/andreruffert/pen/jEOOYN

$(function() {
  var output = document.querySelectorAll('output')[0];
  
  $(document).on('input', 'input[type="range"]', function(e) {
        output.innerHTML = e.target.value;
  });
  
  $('input[type=range]').rangeslider({
    polyfill: false
  });
});

body {
  padding: 50px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

output {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
  rangeslider.js example
  
  https://github.com/andreruffert/rangeslider.js
  by André Ruffert - @andreruffert
-->

<h2>Floating point boundaries</h2>
<input type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output>0.5</output>
<br>
<input type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output>0.5</output>

Answer 1

您必须识别您的输入和输出，以便可以以某种方式链接它们。例如，您可以为 input 元素指定一个 id，并为输出指定一个与相关 input 的 id 匹配的 class 名称。通过一个简单的选择器，您可以定位要修改的正确元素。像这样:

<h2>Floating point boundaries</h2>
<input id="floating" type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output class="floating">0.5</output>
<h2>Other slider</h2>
<input id="other" type="range" value="0.5" step="0.1" min="0.1" max="3.0">
<br>
<output class="other">0.5</output>

然后:

$(document).on('input', 'input[type="range"]', function(e) {

            document.querySelector('output.'+this.id).innerHTML = e.target.value;
      });

http://codepen.io/anon/pen/jPajvp