Question

我有6个滑块，每个滑块的值分别为0-100。我希望能够在每个滑块右侧显示每个滑块百分比（相对于总滑块总和），但我不知道该怎么做。

我能够抓住上面显示的滑块值，以及滑块值和值的总和作为JavaScript变量，但我无法...

1）移动滑块时更新百分比值（我想我可能需要编写一个单独的函数来执行此操作，然后在显示滑块值后立即调用它？）或

2）在滑块值之后的右侧显示百分比值（我有效地舍入为整数）。

任何人都可以告诉我如何做到这一点？从技术角度来看应该不难，但我在这个领域几乎没有经验。我也没有使用jquery（你可以告诉）...谢谢！

<!-- Put divs here... trying to set up the display of percentages -->
<div id="val_weight1"></div>
<div id="val_weight2"></div>
<div id="val_weight3"></div>
<div id="val_weight4"></div>
<div id="val_weight5"></div>
<div id="val_weight6"></div>

<!-- form start -->
<form name = "form_weight1" id = "form_weight1" >
  <text><b> First Weight </b></text>
  <input id="weight1" input type="range" name="weight1" min="0" max="100" value="40" step="1" onchange="showValue(this); " />
  <span id="range">40</span>
  <text>/ PERCENTAGE%</text>

  <script type="text/javascript">
<!-- Original JS bin that modified code: http://jsbin.com/ISekuSiN/5/edit  -->
    function get_nextsibling(n) {
      x=n.nextSibling;
      while (x.nodeType!=1) {
        x=x.nextSibling; }
      return x; }

    function showValue(self) {
      get_nextsibling(self).innerHTML=self.value; }
  </script>
</form>

<form name = "form_weight2" id = "form_weight2" >
  <text><b> Second Weight </b></text>
  <input id="weight2" input type="range" name="weight2" min="0" max="100" value="10" step="1" onchange="showValue(this); " />
  <span id="range">10</span>
  <text>/ PERCENTAGE%</text>
</form>

<form name = "form_weight3" id = "form_weight3" >
  <text><b> Third Weight</b></text>
  <input id="weight3" input type="range" name="weight3" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
  <span id="range">20</span>
  <text>/ PERCENTAGE%</text>
</form>

<form name = "form_weight4" id = "form_weight4" >
  <text><b> Fourth Weight </b></text> 
  <input id="weight4" input type="range" name="weight4" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
  <span id="range">5</span>
  <text>/ PERCENTAGE%</text>
</form>

<form name = "form_weight5" id = "form_weight5" >
  <text><b> Fifth Weight </b></text>
  <input id="weight5" input type="range" name="weight5" min="0" max="100" value="5" step="1" onchange="showValue(this); " />
  <span id="range">5</span>
  <text>/ PERCENTAGE%</text>
</form>

<form name = "form_weight6" id = "form_weight6" >
  <text><b> Sixth Weight </b></text>
  <input id="weight6" input type="range" name="weight6" min="0" max="100" value="20" step="1" onchange="showValue(this); " />
  <span id="range">20</span>
  <text>/ PERCENTAGE%</text>
</form>

<script type="text/javascript">

  var weightfactor1 = parseInt(document.getElementById("weight1").value) ;
  var weightfactor2 = parseInt(document.getElementById("weight2").value) ;
  var weightfactor3 = parseInt(document.getElementById("weight3").value) ;
  var weightfactor4 = parseInt(document.getElementById("weight4").value) ;
  var weightfactor5 = parseInt(document.getElementById("weight5").value) ;
  var weightfactor6 = parseInt(document.getElementById("weight6").value) ;

  var weight_factor_sum = weightfactor1 + weightfactor2 + weightfactor3 + weightfactor4 + weightfactor5 + weightfactor6 ;

    document.getElementById('val_weight1').innerHTML = (weightfactor1 / weight_factor_sum)*100;

    document.getElementById('val_weight2').innerHTML = (weightfactor2 / weight_factor_sum)*100;

    document.getElementById('val_weight3').innerHTML = (weightfactor3 / weight_factor_sum)*100;

    document.getElementById('val_weight4').innerHTML = (weightfactor4 / weight_factor_sum)*100;

    document.getElementById('val_weight5').innerHTML = (weightfactor5 / weight_factor_sum)*100;  

  document.getElementById('val_weight6').innerHTML = (weightfactor6 / weight_factor_sum)*100;

</script>

Answer 1

以此为出发点：

document.querySelector("#range").addEventListener("change", function(e){
    document.querySelector(".range").textContent=e.currentTarget.value;
})

以下是Fiddle。

在处理多个滑块时，为每个滑块添加change事件没有意义，而是使用event-delegation（将change - 侦听器附加到包含所有滑块的父元素，并自己发送事件。

这是一个Fiddle处理更多滑块和和字段。

显示HTML5滑块值旁边的百分比

1 个答案: