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

使用JavaScript文件加载chrome时出现错误

未捕获的TypeError：无法调用null
的方法'data'

我不知道接下来该做什么。我已经广泛搜索过谷歌，但我对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。

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

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

1 个答案: