1

基本的に、以下に表示されるui-slider ucasポイントとグレードは「ライブ」ではないため、ここでいくつかの問題が発生します。たとえば、スライダーを使用するときにそれらを表示したいとします。したがって、すべての計算はすぐに実行されるため、スライドすると、ユーザーが停止したときではなく、計算が変化します。

また、バーが上に移動すると、スライドしたビットが特定の色に変わるように、バーのスタイリングをどのように行いますか。

ライブバージョンの場合：http：//universitycompare.com

スライダーのjQueryは以下のとおりです。

jQuery(document).ready(function($) {

    var slider1 = $("#slider").slider({
        max: 420,
        min: 0,
        step: 20,
        change: function(event, ui) {
            $("#s2").html(ui.value);    
            $("#s2")
        },
        stop:Calculate
    });

    var slider2 = $("#slider2").slider({
        max: 420,
        min: 0,
        step: 20,
        change: function(event, ui) {
            $("#s3").html(ui.value);    
            $("#s3")
        },
        stop:Calculate

    });

    var div = $('#s4'); //cache this object in a variable if you'll be using it multiple times
    slide: function Calculate(){
        var val1 = slider1.slider('option', 'value');
        var val2 = slider2.slider('option', 'value');

        var finalVal = (val1 + val2) / 2;
        //update the ui
            if (finalVal === 0) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 20) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 40) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 60) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 80) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 100) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('N / A');
            }

            if (finalVal === 120) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('EEE');
            }

            if (finalVal === 140) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DEE');
            }

            if (finalVal === 160) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DDE');
            }

            if (finalVal === 180) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('DDD');
            }

            if (finalVal === 200) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CDD');
            }

            if (finalVal === 220) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CCD');
            }

            if (finalVal === 240) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('CCC');
            }

             if (finalVal === 260) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BCC');
            }

             if (finalVal === 280) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BBC');
            }

            if (finalVal === 300) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('BBB');
            }

            if (finalVal === 320) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('ABB');
            }

            if (finalVal === 340) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('AAB');
            }

            if (finalVal === 360) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('AAA');
            }

            if (finalVal === 380) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*AA');
            }

            if (finalVal === 400) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*A*A');
            }

            if (finalVal === 420) { //replace 220 with whatever you're checking
               //if finalVal does equal 220
               div.text('A*A*A*');
            }

    }
});

スライダーのCSSもここにありますが、色が変わっていないようです。

/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; background-color:#ffdd4e; height:7px; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: 7px; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; background-color:#ffdd4e; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-widget-header { background-color:#0071bc !important; height:8px !important; left:1px !important; top:1px !important; position:absolute !important; }
4

1 に答える 1

1

このjsFiddleの例を試してください。

両方のスライダーに、スライダーのスライドイベントへの計算関数の呼び出しを追加しました。

slide: Calculate,

アップデート：

スライダーの値を表示するには、代わりにこれを使用します。

slide: function(event, ui) {
    Calculate();
    $("#s2").html(ui.value);
},

jsFiddleの例

このフィドルでは、値が表示されるようにCSSを変更したことに注意してください（たとえば、白地に白があります）。

于 2012-10-01T11:55:02.150 に答える