Javascript 进度条不起作用

Question

我真的很想拥有 that progress bar (click me to see bar code)在我的网站上，但是当我添加它时，它不起作用。

原始文件:

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

我将这些行放入我的 html 文件中只是为了链接这些文件:

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src='bar.js'></script>

我不知道是我做错了什么还是代码坏了？

求助!灭丘

Answer 1

您提供的工作示例使用 SCSS 而不是 CSS。在 CSS 中，类声明不能嵌套。如果你从 .progress-wrap 中取出 .progress-bar 声明，它就可以工作。

http://jsfiddle.net/dvqfzfkk/1/

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

// SIGNATURE PROGRESS
function 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);
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
  <div class="progress-bar progress"></div>
</div>