Javascript 将5个函数的总值相加，在屏幕上打印结果

我有5个函数，如下所示。我想做的是，一旦用户将每个条滑动到一个位置，将所有5条条的总和打印出一条消息

根据达到的总数，将取决于显示的消息。例如，如果所有5个滑动条的总数=500，则消息将显示“You's very happy”。如果所有5个滑动条的总数=100，则消息将显示“You's very sad”

我是新来的，所以我在寻找一些经验和最佳实践建议，这样我就可以接受并学习

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

卷：

而且您可能误用了

输入

——这不是为了显示消息，而是为了捕获用户输入。您可以动态设置任何html元素的内容-只需使用

.text（msg）

或

.html（msg）

而不是

.val（msg）

。实际上，我希望输出是一个图像。我该如何做到这一点？这很容易！只需根据

total

选择图像名称，然后使用

$（'#image id'）.attr（'src'，selected_name）

更改

img

-标签的

src

属性，从而显示图像。在回答中反映了这一点。太酷了！干杯，伙计，我要拿着这个，用它工作！你是一个传奇

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

<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 );
}