4个滑块值的平均值

Average of 4 slider values

本文关键字：平均值 4个      更新时间：2023-09-26

我正在尝试获得4个简单输入滑块的平均值。我想在文本字段中显示平均值。我确信我需要使用javascript/jquery。但我对它不是很熟悉，所以我可能需要一些帮助。我确信它非常简单，但我不知道我应该使用哪个事件处理程序等。

我有4个滑块，就像这样：

<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="3" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>

如果有任何帮助，我都将不胜感激。

试试这个

$(".slider").change( function(e){
    var b=0;
    $('.slider').each(function(){
      var a=parseInt($(this).val());
      b=b+a;
    });
   var avg=b/4;
    $('#textValue').val(avg);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Result  - <input type="text" id="textValue" />
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="3" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="4" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="3" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="5" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>

相关文章：