jQuery / CSS栏百分比在rails应用程序中不起作用答案

【问题标题】：jQuery/CSS bar percentage not working in rails appjQuery / CSS栏百分比在rails应用程序中不起作用
【发布时间】：2016-09-14 14:38:06
【问题描述】：

我已经分叉了一个条形百分比，它在 codepen 中运行良好。当我将代码 sn-p html/css/js 粘贴到我的 rails 应用程序中时，它不起作用。没有动画，没有数据百分比显示。

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

codepen 中的 Bar 百分比代码 sn-ps：

$('.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>

【问题讨论】：

听起来像是资产管道问题。你确认js文件正在加载吗？
@margo 我已经尝试注释掉 jquery.min.js 并将其粘贴到我的 rails 应用程序中；然后在application.js中添加//= require bar_percentage；我可以找到 jquery.min.js 和 bar_percentage.js 文件都被加载到 chrome 中。但问题仍然存在……但问题仍然存在……

标签： javascript jquery css ruby-on-rails

【解决方案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);
      }
    });
  });
})

【讨论】：