Bootstrap-slider.js 和类不起作用

如何解决Bootstrap-slider.js 和类不起作用

我正在尝试创建一个带有两个滑块的页面。用户使用滑块选择值，脚本显示用户选择的值，并且还简单地将两个值彼此相乘和一些因子。简单的。这是我的代码。问题似乎出在我使用 class="ms-slider" 时。没有它，格式会丢失，但脚本无法使用它。

<form method="post" action="#">
//Slider #1
<input type="range" class="ms-slider" name="viewers" id="value1" value="0" min="0" max="200000" step='1000'  data-highlight="true" onchange="calc" data-slider-ticks="[0,100000,200000]" data-slider-ticks-snap-bounds="3" data-slider-value="10000" data-slider-ticks-labels='["0","100,000","200,000"]'/>
//Slider #2   
<input type="range" class="ms-slider" name="price" id="value2" value="0" min="0" max="16" step='1' data-highlight="true" onchange="calc" data-slider-ticks="[0,8,16]" data-slider-ticks-snap-bounds="3" data-slider-value="8" data-slider-ticks-labels='["$0","$8","$16"]'/>
    
//output fields - displays slider values
   <input type="text" id="value11" name="value11"/>
   <input type="text" id="value21" name="value21"/>
    
//output fields - displays the values multiplied   
   <input type="text" id="total1" name="total1"/>
   <input type="text" id="total2" name="total2"/> 
    
</form>


<script>
// On any change in form.
$("form :input").change(function() {
    // Fetch selected options.
    var value1 = $('form #value1').val();
    var value2 = $('form #value2').val();
   
       
    // Output to text field.
    $('form #value11').val((value1));
    $('form #value21').val((value2));
    $('form #total1').val((value1 * value2) * 0.01);
    $('form #total2').val((value1 * value2) * 0.05);
});
</script>

解决方法

两个 id 值不是唯一的（value1 和 value2）。第一个定义位于 range input 中。以下是重复项：

  <input type="text" id="value1" name="value1"/>
  <input type="text" id="value2" name="value2"/>

我想说的是您遇到的问题是两组标签具有相同的 id：value1 和 value2。有两个带有 id value1 的标签和两个带有 id value2 的标签。所有 id 标记都应该是唯一的，以便您的代码正常工作。