0

我有一个滑块，它需要穿过一组彼此距离相等的点，同时显示完全任意的定价。

例如，我有 4 个服务器配置需要将月费提高到 50、100、201 和 403 美元。Rackspace 和 Amazon 的价格也需要更新以显示完全不同的数字……Rackspace 的价格为 86、245、648 和 864，而 43、86、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

感谢您的任何帮助。

4

1 回答 1

0

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

您需要这条线来估算每月的费用：

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

并且您需要将 id 添加到包含其他两个价格值的 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>
于 2013-04-03T18:30:15.533 回答