Question

我正在创建一个利用多个jquery ui滑块的网站。滑块每个操纵许多数字，这些数字加在一起形成总数。因此，我需要将滑块的所有计算存储到一个函数中。除了滑块显示的值存在错误外，一切都正常。如果我向上移动滑块然后再将其向下移动，则在开始下降之前，该值将首先上升一个。反过来也是如此。根据我的研究，我确定这是因为我使用的是.slider（“values”，0）而不是ui.value。

我遇到的问题是当我将其更改为ui.value时，控制台会记录ui未定义，因为它位于不同的函数中。但是，它几乎必须具有不同的功能才能工作。

这是我的代码：

$(document).ready(function() {

        $(function() {
            $( "#accordion" ).accordion();
        });

        //Graphic Design Slider
        $(function() {
            $( "#slider-range-min" ).slider({
                min: 0,
                max: 50,
                value: 0,
                slide: function( event, ui ) {
                    update();
                }
            });
        });

        //Web Development Slider
        $(function() {
            $( "#slider-range-min2" ).slider({
                min: 0,
                max: 50,
                value:0,
                slide: function( event, ui ) {
                    update();
                }
            });
        });

        //Commercial Slider
        $(function() {
            $( "#slider-range-min3" ).slider({
                min: 0,
                max: 50,
                value:0,
                slide: function( event, ui ) {
                    update();
                }
            });
        });

        //Sets budget input value as variable
        $("#budget").on("keyup change", function() {
            value = this.value;
            update();
            console.log(value);
        });

    });

    function update() {
        //slider functionality
        $graphicDesign = $("#slider-range-min").slider("values", 0);
        //$graphicDesign = $("#slider-range-min").val("$" + ui.value);
        $webDev = $("#slider-range-min2").slider("values", 0);
        //$webDev = $("#slider-range-min2").val("$" + ui.value);
        $commercial = $("#slider-range-min3").slider("values", 0);
        //$commercial = $("#slider-range-min3").val("$" + ui.value);
        $totalHours = $graphicDesign + $webDev + $commercial;
        $totalCost = ($graphicDesign*20) + ($webDev*30) + ($commercial*50);

        //Stores graphic design percent as variable
        $graphicDesignCalculation = $("#slider-range-min").slider("value");
        $graphicDesignCost = ($graphicDesignCalculation*20);
        $graphicDesignPerc = Math.round((($graphicDesignCost*100)/$totalCost)*10)/10;
        console.log($graphicDesignPerc);

        //Stores web development percent as variable
        $webDevelopmentCalculation = $("#slider-range-min2").slider("value");
        $webDevelopmentCost = ($webDevelopmentCalculation*30);
        $webDevelopmentPerc = Math.round((($webDevelopmentCost*100)/$totalCost)*10)/10;
        console.log($webDevelopmentPerc);

        //Stores commercial percent as variable
        $commercialCalculation = $("#slider-range-min3").slider("value");
        $commercialCost = ($commercialCalculation*50);
        $commercialPerc = Math.round((($commercialCost*100)/$totalCost)*10)/10;
        console.log($commercialPerc);

        //slider displayed values
        $("#gdhours").val($graphicDesign);
        $("#gdcost").val("$" + $graphicDesignCost);
        $("#wdhours").val($webDev);
        $("#wdcost").val("$" + $webDevelopmentCost);
        $("#chours").val($commercial);
        $("#ccost").val("$" + $commercialCost);
        $("#totalhours").val($totalHours);
        $("#totalcost").val("$" + $totalCost);
        $("#gdpercentage").val($graphicDesignPerc + "%");
        $("#wdpercentage").val($webDevelopmentPerc + "%");
        $("#cpercentage").val($commercialPerc + "%");

        //Functionality if budget is not defined
        if (typeof value === 'undefined') {
            console.log("no budget");
        }

        //Determines if within budget
        else {
            if(value >= $totalCost) {
                console.log("Under budget");
                $("#overbudget").val("$0");
                $("#overbudget").removeClass( "red" );
                $("#overbudget").addClass( "blue" );
            }
            if (value < $totalCost) {
                console.log("Over budget");
                $("#overbudget").val($totalCost - value);
                $("#overbudget").removeClass( "blue" );
                $("#overbudget").addClass( "red" );
            }
        }


        //Pie Chart 
        var chart = new CanvasJS.Chart("chartContainer",
        {
            title:{
                text: "Breakdown of Spending",
                veticleAlign:"top",
                horizontalAlign: "center",
                fontFamily: "Garamond",
                fontColor: "black",
            },
            legend:{
                verticalAlign: "center",
                horizontalAlign: "left",
                fontSize: 16,
                fontFamily: "Lato"
            },
            animationEnabled:false,
            theme: "theme3", 
            data: [
                {
                    type: "pie",
                    indexLabelFontFamily: "Garamond",
                    indexLabelFontSize: 20,
                    startAngle: -20,
                    showInLegend: true,
                    toolTipContent:"{y}%",
                    dataPoints: [
                        {  y: $graphicDesignPerc, legendText:"Graphic Design"},
                        {  y: $webDevelopmentPerc, legendText:"Web Development"},
                        {  y: $commercialPerc, legendText:"Commercial"}
                    ]
                }
            ]
        });

        chart.render();

        };

你可以说我对编码很新。我尝试过许多不同的方法来实现这一点，我只是想不出一个能够保持功能同时保持一切功能的方法。

Answer 1

我不确定它会解决您的问题，但有两种方法可以在更新功能中获取ui：

将其交给函数
```
function update(ui){
    //...
}
```

然后在幻灯片回调函数中

slide: function( event, ui ) {
                    update(ui);
                }

以及您的＆＃34;预算＆＃34; ：

 $("#budget").on("keyup change", function() {
        value = this.value;
        update({'value':value});
        console.log(value);
    });

第二个是制作一个＆＃34;全球＆＃34;变种

但我再说一遍，我不确定这会解决你的错误

Jquery UI Slider ui.slider将ui作为undefined返回

1 个答案: