javascript - 尝试实现一个有问题的简单响应式进度条

Question

我已经按照网站上的说明进行操作，我已经关闭了信息，但现在我被卡住了。代码如下:

HTML

<div class="progress-wrap progress" data-progress-percent="25">
    <div class="progress-bar progress"></div>
</div>

CSS 代码

 .progress {
    width: 100%;
    height: 50px;
}

.progress-wrap {
    background: #f80;
    margin: 20px 0;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    background: #ddd;
    left: 0;
    position: absolute;
    top: 0;
}

和JS

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
    moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
    console.log("moveProgressBar");
    var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
    var getProgressWrapWidth = $('.progress-wrap').width();
    var progressTotal = getPercent * getProgressWrapWidth;
    var animationLength = 2500;

    // on page load, animate percentage bar to data percentage length
    // .stop() used to prevent animation queueing
    $('.progress-bar').stop().animate({
        left: progressTotal
    }, animationLength);
}

当我在 chrome 中加载 JavaScript 文件时出现错误

Uncaught TypeError: Cannot call method 'data' of null

我不知道接下来要做什么。我在 Google 上进行了广泛的搜索，但我对 JavaScript 的了解正在慢慢消失。

Answer 1

您的代码运行没有错误。我只是从这里更改了 HTML 部分:

<div class="progress-wrap progress" data-progress-percent="25">

对此

<div class="progress-wrap progress" data-progress-percent="25">
    <div class="progress progress-bar"/>
</div>

使动画可见。

你在那里工作 JSFiddle .

根据您提供的错误消息，我会说您在其他地方有问题。