jQuery/CSS欄百分比不適用於rails應用程序

我已經分叉了一個欄百分比，並且它在codepen中運行良好。當我將代碼片段html/css/js粘貼到我的rails應用程序中時，它不起作用。沒有動畫，沒有數據百分比顯示。jQuery/CSS欄百分比不適用於rails應用程序

bar percentage not working in rails app 現在，我該怎麼辦？

酒吧百分比代碼片段codepen：

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

來源

2016-09-14 yalin

聽起來像一個資產管道問題。你確認js文件正在被加載嗎？ – margo

@margo我試過將jquery.min.js註釋掉並粘貼到我的rails應用程序中;然後在application.js中添加'// = require bar_percentage';我可以找到jquery.min.js和bar_percentage.js文件都被加載到chrome中。但問題仍然是... 但問題仍然是... – yalin

我的朋友添加$(function() {})在js文件，和它的作品。

我現在的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); 
 
     } 
 
    }); 
 
    }); 
 
})

來源

2016-09-15 04:35:27 yalin

jQuery/CSS欄百分比不適用於rails應用程序

回答

相關問題