当两个项具有相同的id时，Noob jquery错误

Question

这样可以正常工作但是当我有两个滑块时，javasctript会导致问题，因为它们都具有相同的id“范围”。如何修改js以允许两个滑块位于同一页面上？感谢

<li>
<label for="budget">Budget*</label>
<input type="range" min="1000" max="10000" value="2000" step="1000" onchange="showValue(this.value)">
<span id="range">$2000</span>

<script>
  function showValue(newValue)
  {
    document.getElementById("range").innerHTML=newValue;
  }
</script>
</li>

Answer 1

两个项目从不具有相同的ID。这就是课程的用途。

此外，如果您使用的是jQuery，则可以将此代码压缩为：

$("#range").html(newValue);

Answer 2

解决方案是使用类而不是ID。

另外，不要以这种方式将vanilla JavaScript与jQuery混合使用。如果你正在使用jQuery，那么你将与交互操作DOM。

1。的 HTML ：

<li>
    <label for="budget">Budget*</label>
    <input type="range" min="1000" max="10000" value="2000" step="1000">
    <span class="range">$2000</span>
</li>
<li>
    <label for="budget">Budget*</label>
    <input type="range" min="1000" max="10000" value="2000" step="1000">
    <span class="range">$2000</span>
</li>

2。的的jQuery ：

$(document).ready(function(){
    $('input[type="range"]').change(function(){
        var $this = $(this),
            $li = $this.closest('li');
        $li.find('span.range').text('$'+$this.val());
    });
});

3。 Demo