Jquery UI Slider ui.slider 将 ui 返回为未定义

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);
                }

为了您的“预算”：

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

第二个是创建一个“全局”变量。

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