將5個函數的總值加起來在屏幕上打印結果

Question

我有5個函數，如下所示。我想要做的是一旦用戶將每個欄杆滑動到一個位置，總共5個欄杆的總和就會打印出一條信息。

根據達到的總數，將取決於顯示的消息。例如，如果所有5個滑動條的總數= 500，則該消息將顯示爲「您非常高興」。如果所有5個滑動條的總數= 100，則該消息將顯示「你非常傷心」

我對此很陌生，所以尋找一些經驗和最佳實踐建議，以便我可以把握和學習。

$(function() { 
    $("#slider-vertical").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 10, 
     slide: function (event, ui) { 
      $("#amount").val(ui.value); 
     } 
    }); 
    $("#amount").val($("#slider-vertical").slider("value")); 
}); 

在HTML中，滑塊的結果被示出這樣的：

<p> 
    <label for="amount">Volume:</label> 
    <input type="text" id="amount" style="border: 0; color: #f6931f; font- weight: bold;" 
    /> 
</p> 
<div id="slider-vertical" style="height: 200px;"></div> 
</div> 

Answer 1

<p> 
    <label for="amount">Volume:</label> 
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> 
</p> 
<style> 
    .slider { height: 200px; float:left; margin-right:20px; } 
</style> 
<div class="slider"></div> 
<div class="slider"></div> 
<div class="slider"></div> 
<div class="slider"></div> 
<div class="slider"></div> 

<script> 
$(function() { 
    $(".slider").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 10, 
     slide: function(event, ui) { 
      var total = 0; 
      $('.slider').each(function() { 
       total += $(this).slider('value'); 
      }); 
      $("#amount").val(total); 
     } 
    }); 
}); 
</script> 

ADDITION：

爲了顯示根據合計值不同的圖像，您應該首先使用圖像標籤代替輸入標籤

<img id="amount-img" src="/path/to/images/defualt.png"/> 

;其次，像這樣用代碼來選擇和顯示圖像：

slide: function(event, ui) { 
    var total = 0; 
    $('.slider').each(function() { 
     total += $(this).slider('value'); 
    }); 

    var img = 'default.png'; 
    if(total>=50) img = 'above50.png'; 
    else if(total>=100) img = 'above100.png'; 
    else if(total>=250) img = 'above250.png'; 

    $('#amount-img').attr('src', '/path/to/images/'+img); 
}