用於多個范圍滑塊輸入的 javascript 代碼修復

Question

我不能在單個頁面上使用多個范圍滑塊。 所有輸入僅更改頁面的第一個輸出。

該示例位於以下鏈接中。

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

您必須確定inputs和outputs ，以便以某種方式鏈接它們。 例如，您可以為input元素提供一個id ，並為輸出提供一個與相關input的 id 匹配的class名。 使用簡單的選擇器，您可以定位要修改的正確element 。 像這樣：

<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