4個滑塊值的平均值

Question

我試圖獲得4個簡單輸入滑塊的平均值。我想在文本字段中顯示平均值。我很確定我需要使用JavaScript/jQuery。但我對它不是很熟悉，所以我可能需要som的幫助。我敢肯定，這是很簡單的，但我不知道我應該使用哪一個事件處理等

我有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> 

我希望任何形式的幫助。

Answer 1

試試這個

$(".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>