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

Adding the total value of 5 functions together to print a result on screen

本文关键字：屏幕 结果 打印 函数 5个      更新时间：2023-09-26

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

根据达到的总数，将取决于显示的消息。例如，如果所有5个滑动条的总数=500，则消息将显示为"You are very happy"。如果所有5个滑动条的总数=100，则消息将显示"You are very said"

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

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

<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 );
}
相关文章：