Question

我已经分了一个百分比，它在codepen中效果很好。当我将代码片段html / css / js粘贴到我的rails应用程序中时，它不起作用。没有动画，没有数据百分比显示。

bar percentage not working in rails app 现在，我该怎么办？

代码堆中的Bar Percentage代码段：

$('.bar-percentage[data-percentage]').each(function() {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({
    countNum: 0
  }).animate({
    countNum: percentage
  }, {
    duration: 2000,
    easing: 'linear',
    step: function() {
      // What todo on every count
      var pct = Math.floor(this.countNum) + '%';
      progress.text(pct) && progress.siblings().children().css('width', pct);
    }
  });
});

#container {
  text-align: center;
  margin: 20px;
}
h2 {
  color: #CCC;
}
a {
  text-decoration: none;
  color: #EC5C93;
}
.bar-main-container {
  margin: 10px auto;
  width: 300px;
  height: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 0.8em;
  color: #FFF;
}
.wrap {
  padding: 8px;
}
.bar-percentage {
  float: left;
  background: rgba(0, 0, 0, 0.13);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 9px 0px;
  width: 18%;
  height: 16px;
}
.bar-container {
  float: right;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.13);
  width: 78%;
  margin: 12px 0px;
  overflow: hidden;
}
.bar {
  float: left;
  background: #FFF;
  height: 100%;
  -webkit-border-radius: 10px 0px 0px 10px;
  -moz-border-radius: 10px 0px 0px 10px;
  border-radius: 10px 0px 0px 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
/* COLORS */

.azure {
  background: #38B1CC;
}
.emerald {
  background: #2CB299;
}
.violet {
  background: #8E5D9F;
}
.yellow {
  background: #EFC32F;
}
.red {
  background: #E44C41;
}

<head>
  <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
</head>

<div id="container">
  <h2><strong>Bar percentage</strong> inspired by this <a href=
    "http://dribbble.com/shots/1090476-Percentage-Bar">dribbble shot</a></h2>

  <div id="bar-1" class="bar-main-container azure">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="46"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-2" class="bar-main-container emerald">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="94"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-3" class="bar-main-container violet">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="47"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-4" class="bar-main-container yellow">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="85"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

  <div id="bar-5" class="bar-main-container red">
    <div class="wrap">
      <div class="bar-percentage" data-percentage="33"></div>
      <div class="bar-container">
        <div class="bar"></div>
      </div>
    </div>
  </div>

</div>

Answer 1

我的朋友在js文件中添加$(function() {})，它可以正常工作。

我当前的js文件：

$(function() {
  $('.bar-percentage[data-percentage]').each(function () {
    var progress = $(this);
    var percentage = Math.ceil($(this).attr('data-percentage'));
    $({countNum: 0}).animate({countNum: percentage}, {
      duration: 2000,
      easing:'linear',
      step: function() {
        // What todo on every count
        var pct = Math.floor(this.countNum) + '%';
        progress.text(pct) && progress.siblings().children().css('width',pct);
      }
    });
  });
})

jQuery / CSS栏百分比无法在rails app

1 个答案: