Question

然而，当我滑动滑块时，只显示文本，加载时它没有显示任何内容。我希望它应该根据它获得的值显示相应的文本。

<div class="progress-bar">
        <p id="amount"></p>
        <div class="progress-section" id="progress-slide"></div>
        <span class="left-0">0%</span>
        <span class="right-100">100%</span>
    </div>

$(function () {
    $("#progress-slide").slider({
        range: "min",
        value:10,
        max: 100,
        animate: true,
        slide: function (event, ui) {
            $("#amount").text("$" + ui.value);
            if (ui.value >= 0 && ui.value < 30) {
                $("#amount").text('text testing 1'),
            }
            else if (ui.value > 30 && ui.value < 60) {
                $("#amount").text('text testing 2'),
            } 
            else if (ui.value > 60 && ui.value < 90) {
                $("#amount").text('text testing 3'),
            } 
            else {
                $("#amount").text('text testing 4'),
            }
        }
    });
    $("#amount").val("$" + $("#progress-slide").slider("value"));
});

Answer 1

尝试将您的功能放在这里： $（文件）。就绪（函数（）{

}）;

然后在页面加载时，您的功能将被执行。

Answer 2

最后使用()立即调用该函数：

$(function () {
    $("#progress-slide").slider({
        range: "min",
        value:10,
        max: 100,
        animate: true,
        slide: function (event, ui) {
            $("#amount").text("$" + ui.value);
            if (ui.value >= 0 && ui.value < 30) {
                $("#amount").text('text testing 1'),
            }
            else if (ui.value > 30 && ui.value < 60) {
                $("#amount").text('text testing 2'),
            } 
            else if (ui.value > 60 && ui.value < 90) {
                $("#amount").text('text testing 3'),
            } 
            else {
                $("#amount").text('text testing 4'),
            }
        }
    });
    $("#amount").val("$" + $("#progress-slide").slider("value"));
})();

在加载时加载javascript函数

2 个答案: