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

添加：

为了根据总值显示不同的图像，首先应该使用图像标签而不是输入标签

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