使用 Jquery Ui 滑块进行乘法运算答案

【问题标题】：Multiplication with Jquery Ui Slider使用 Jquery Ui 滑块进行乘法运算
【发布时间】：2014-06-11 19:12:33
【问题描述】：

我正在尝试构建一个类似于此站点上的 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();
            }
        });


    });

最终在我弄清楚这一点之后，我还想知道如何在滑块达到某个点后更改滑块和单词的颜色。（if then语句？）不知道怎么实现...

非常感谢您对此的任何帮助。谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui slider multiplication

【解决方案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/

如果您用您想要做的颜色编码的描述和示例更新您的问题，我们可以将其包含在我们的答案中。

【讨论】：