时间戳

首页 > 解决方案 > Bootstrap-slider.js 和类不工作

javascript - 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>

标签： javascriptbootstrap-4slider

解决方案

两个id值不是唯一的 (value1和value2)。第一个定义在range inputs 中。以下是重复项：

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

我想说的是您遇到的问题是两组标签具有相同id的 s:value1和value2. 有两个标签id value1和两个标签id value2。所有id标签都应该是唯一的，这样您的代码才能正常工作。

推荐阅读