0

以下に示すような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>
4

1 に答える 1

0 
<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 );
}
于 2013-09-01T20:19:07.867 に答える