Question

我正在尝试更新进度条，但是在名为updateProgressBar（）的函数中，它不允许我这样做；

 function updateProgressBar(baby_due_date) {
    window.location.href = "../../home.html";
    //40 weeks of pregnancy
    //Setting todays date
    var todays_date = new Date();
    //Finding the difference bewtween the dates by milli sec.
    var date_difference = baby_due_date - todays_date;
    //Converting millisecs to weeks
    var weeks_Left_unil_baby = Math.ceil(date_difference / (1000 * 3600 * 24 * 7));
    //Updating how many weeks are left on HTML

    //Finding the progress of the pregnancy by percent
    var progress_percent = (1 - (weeks_Left_unil_baby / 40)) * 100;
    console.log(progress_percent);

    //TODO: need to update progress here  <<<<<<<<<<<<<<<<<<<<<<<<<
    $('#progress-bar').attr('aria-valuenow', '100%')
    progress_bar_classes.width('100%');
}

这是我的html。

<div class="progress bg-secondary">
                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="1" aria-valuemin="25%" aria-valuemax="100"></div>
                </div>

这是我的CSS。

div.progress-bar {
  width: 25%;
}

Answer 1

我尝试调试您的代码，但还不够完整，无法对其进行完全调试。 progress_bar_classes is not defined出现时我被卡住了。

无论如何，这可能是一些问题：

对我来说，进度条的高度默认为0，所以我看不到它。
$('#progress-bar').attr('aria-valuenow', '100%')在这里是指html代码中具有 id progress-bar的元素，但是只有具有 class 的元素progress-bar
$('#progress-bar') $()仅在您还包含jquery时才能使用。

尝试更新JS文件中的进度栏

1 个答案: