JavaScript 滑块答案

【问题标题】：JavaScript sliderJavaScript 滑块
【发布时间】：2010-09-16 19:08:30
【问题描述】：

我需要为客户的网站创建一个“滑块”。滑块应该允许人们选择他们想要的 x 项目的数量，并显示基于此的价格。奇怪的是，价格上涨的比例会随着商品数量的增加而下降：

1 件：100 美元
2 件商品：+90 = 190 美元
3 件商品：+ 80 = 270 美元
4 件：+ 70 = 340 美元
5 件：+ 60 = 400 美元
6 件：+ 50 = 450 美元
7 项：+ 50 = 500 美元

从那时起所有的增长都是+50。这似乎是一个过于简单化的问题，但有人知道我该怎么做吗？我几乎没有 JavaScript 经验 :(

【问题讨论】：

标签： javascript slider

【解决方案1】：

查看雅虎！用户界面。他们有一个滑块小部件：http://developer.yahoo.com/yui/slider/

以下示例应该可以帮助您入门：http://developer.yahoo.com/yui/examples/slider/slider-ticks.html。

所有 JavaScript 框架（jQuery、MooTools）似乎都提供了一个滑块。 YUI 将为您提供大量控制和加载程序，因此您不必在服务器上托管脚本。请注意，YUI 不会像我提到的其他两个那样使实现变得轻松。

这是一个 MooTools 示例：

// First example of http://demos.mootools.net/Slider

<div class="slider" id="myslider">
      <div class="knob" style="position: relative;"/>
    </div>

还有 JavaScript：

var el = $('myslider'); // The slider graphic
new Slider(el, el.getElement('.knob'), {
    steps: 7,   // There are 7 choices
    range: [1, 7],  // Minimum value is 1, maximum is 7
    onChange: function(value){
        // Calculation of the value goes here
    }
});

【讨论】：

【解决方案2】：

虽然用 JS 完成滑块的方法可能有无数种，但我认为计算价格的最简单方法是将它们硬编码（或列出）到某个地方，然后 else-if: 遍历它们。

您可以执行一种算法，将 100-(i*10) 计算为前五个项目，50 计算其余项目，但未来可能比硬列出的方式更难改变。

【讨论】：