Question

我正在尝试构建一个类似于此网站上的ui滑块：http://www.solarcity.com/

我希望能够显示月度值，然后显示旁边的年度值。（我假设当然每月乘以12的值）

曾几何时我的滑块工作正常，直到我试图将月值乘以12。

我做错了什么？（对不起，我是JavaScript新手）

这是我的Jsfiddle：http://jsfiddle.net/7qDyq/1/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year

        <div id="bill_slider">

        </div>

$(document).ready(function(){

        function update() {
            var bill_slider = $('#bill_slider').slider('value');
            var yearly_bill = (monthly_bill * 12 ) 


            $("#monthly_bill").text(tasks_time);
            $("#monthly_bill").text(tasks_done);


        }

        $("#bill_slider").slider({
            value: 1,
            min: 0,
            max: 450,
            step: 5,
            slide: function() {
                update();
            }
        });


    });

最终在我弄明白之后，我也想知道如何在滑块碰到某个点后更改滑块和单词的颜色。（如果那么声明？）不确定如何实现......

非常感谢任何帮助。谢谢！

Answer 1

原始jsFiddle中的大多数问题都追溯到错误的JS var名称;这是你如何达到预期的效果：

function update() {
        var bill_slider = $('#bill_slider').slider('value');
        var yearly_bill = (bill_slider * 12)
        $("#monthly_bill").text(bill_slider);
        $("#yearly_bill").text(yearly_bill);
    }

    $("#bill_slider").slider({
        value: 1,
        min: 0,
        max: 450,
        step: 5,
        slide: function () {
            update();
        }
    });

工作jsFiddle，来自您的http://jsfiddle.net/6Bprf/5/

如果您使用说明＆amp;更新您的问题您想要做的颜色编码的例子，我们可以在我们的答案中包括它。

使用Jquery Ui Slider进行乘法运算

1 个答案: