如何在 jQuery 小部件中使用动态属性值

How to use a dynamic property value in a jQuery widget

本文关键字：动态属性 jQuery 小部更新时间：2023-09-26

我有一个javascript，每当我从下拉菜单中选择一个选项时，它都会返回一个值。

   $(document).ready(function() {
        function calculateVals() { 
            //dropdown menus      
             var valuestart = $("select[name='timestart']").val();
             var valuestop = $("select[name='timestop']").val();
             //create date format          
             var timeStart = new Date("01/01/2007 " + valuestart).getHours();
             var timeEnd = new Date("01/01/2007 " + valuestop).getHours();
             var hourDiff = timeEnd - timeStart;                         
             return hourDiff;  
        }
        $("select").change(calculateVals);
        calculateVals();
    });

上面的脚本返回一个数字，我需要将其添加到下面的 jquery 插件中。我需要将其添加到max选项中，但calculateVal is not defined出现错误。

$(function(){
    $("#slider").slider({
        range: "min",
        value:  8,
        min: 1,
        max: calculateVals(), //my attempt
        step: 1,
        slide: function(event, ui) {
            $("#amount").text(ui.value);
        },
         stop: function(event, ui) {
            $("#notifications").val(ui.value);
        }
    });
    $("#notifications").val( $("#slider").slider("value") );
});

将函数移动到全局范围：

function calculateVals() {       
    //code here...
    return someResult;                                           
}
$(document).ready(function() {
        $("select").change(calculateVals);
    calculateVals();
});

更好的是，了解 DOM ready 意味着什么，因为你滥用它。

您应该只有一个就绪处理程序。
只有与 DOM 元素相关的代码才应该存在。

更新：

您可以稍后通过以下方式更改滑块最大值：

$( "#slider").slider("option", "max", calculateVals());

尝试在就绪块的一侧定义function：

function calculateVals() { 
             //code here...
             return someResult;                                          
}

$(document).ready(function() {
    $("select").change(calculateVals);
    calculateVals();
});