Question

这里有几个问题，如ui-slider ucas points＆amp;下面显示的等级不是“实时”，因为我希望它们在使用滑块时出现。因此，所有计算都会立即发生，因此当您滑动时，它们会发生变化，而不是在用户停止时。

此外，我如何设计酒吧样式，以便酒吧向上移动已经滑动的位将变成某种颜色。

滑块的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; }

Answer 1

试试 jsFiddle example 。

对于两个滑块，我都将对计算功能的调用添加到滑块的滑动事件中。

slide: Calculate,

更新

要显示滑块值，请改用：

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

<强> jsFiddle example

请注意，在这个小提琴中，我更改了CSS以使值可见（例如，白色为白色）。

jQuery UI-Slider没有'live'效果和CSS样式

1 个答案: