Question

我有一个滑块需要移动一组彼此相等的点，同时显示完全随意的价格。

例如，我有4个服务器配置需要将每月费率移动到50,100,201和403美元。 Rackspace和亚马逊价格也需要更新以显示完全不同的数字... Rackspace的86,245,648和864以及43,46,172和345美元。这意味着当服务器显示50美元时，Rackspace将显示86美元，亚马逊将显示86美元。这可能是jQuery 101之类的东西。洛尔

开箱即用，滑块只给出坐标值。

我的jQuery知识有点差，而我可以阅读正在发生的事情，我知道我想要它做什么，我只是无法弄清楚如何将其转化为写作。

$(function() {
$( "#slider" ).slider({
    value: 0,
    min: 50,
    max: 498,
    stepValues: [50, 114, 178, 243, 306, 370, 434, 498],
    slide: function( event, ui ) {

        var stepValues = $(this).slider("option", "stepValues"),

            distance = [],
            minDistance = $(this).slider("option", "max"),
            minI;

            $.each(stepValues, function(i, val) {
                distance[i] = Math.abs( ui.value - val );
                    if ( distance[i] < minDistance ) {
                        minDistance = distance[i];
                        minI = i;
                    }
            });

            if ( minDistance ) {
                $(this).slider("value", stepValues[ minI ]);
                return false;
            }

        $( "#amount" ).val( "$" + ui.value );
    }
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );

});

这是我项目中步骤滑块的半半工作版本：http://robsdesign.com/nebo/internap/cloud.html

感谢您的帮助。

Answer 1

有一些javascript丢失。正如您所看到的，每当您将鼠标悬停在滑块上时，都会添加一个ui-hover类，当您单击它时，您将获得一个ui-active类。这可能是触发或触发更新滑块位置的事件。你可以做两件事。侦听此事件并更新值，或将代码放在更新滑块的相同代码中。

您需要此行来估算每月费用：

$( "#amount" ).val( *here); // place *here the value you want to update

并且您需要将ids添加到包含其他两个价格值的html中：

<span class="cost">$263/Month</span>

和

<span class="cost">$238/Month</span>

类似于：

<span class="cost" id="rack">$263/Month</span>

和

<span class="cost" id="amazon">$238/Month</span>

然后用这些行更新它们的值。

$( "#rack" ).val( *here); // place *here the value you want to update

和

$( "#amazon" ).val( *here); // place *here the value you want to update

基于更新的值将是滑块在更改位置时获得的“左”样式：

例如，在第一个位置，您有0％

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>

并为下一个位置获得此值：

<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 14.285714285714285%;"></a>

jQuery Step Slider输出多个变量（价格）

1 个答案: