如何使用JavaScript或jQuery构建内联评级？

Question

我需要为电视节目制作内联评级。最高评级我把jQuery代码，html文档中的当前评级。这就是我找到这种方法的方法。

＆＃13;

＆＃13;

$(document).ready(function() {
    var maxRating = $('.rate-line').width();
	var maxRating = 6; //max-rating
	var currentRatingFirst = $('.first-rd').text();
	var calc = (currentRatingFirst / maxRating) * 100 + "%";
	$('.first-rl span.fill').width(calc);
});

＆＃13;

.rate-line {
    border: 1px solid #bababa;
	background: #fff;
	position: relative;
	vertical-align: middle;
	margin-right: 1.25em;
	overflow: hidden;
	width: 50%;
	height: 20px;
}
.rate-line, .rate-data, .fill {
    display:inline-block;
}
.fill {
	background: #ff6292;
	height: 22px;
	position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <span class="rate-line first-rl">
    <span class="fill"></span>
  </span>
  <span class="rate-data first-rd">4.56</span>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，我需要在本月创建6个评级行，然后为下一个创建6个等级，依此类推。每次我必须提供新的独特课程才能使其发挥作用。代码变得庞大。还有一个，所有这些评级都嵌套在bootstrap轮播项目中，当我复制它时没有任何效果。我根本不擅长JavaScript并且我在寻求你的帮助。您能否告诉我如何使其正常工作并使其更容易？

Answer 1

在这种情况下，创建盆地自定义插件是有意义的，因此您可以轻松地重复使用它而无需复制代码。

这是一个非常基本的示例，说明如何使用新方法扩展jQuery原型：

$.fn.rating = function(options) {
    return this.each(function() {
        var maxRating = $(this).find('.rate-line').width();
        var maxRating = 6;
        var currentRatingFirst = $(this).find('.first-rd').text();
        var calc = (currentRatingFirst / maxRating) * 100 + "%";
        $(this).find('.first-rl span.fill').width(calc);            
    });
};

$(document).ready(function () {
    $('.rating').rating();
});

.rate-line {
    border: 1px solid #bababa;
    background: #fff;
    position: relative;
    vertical-align: middle;
    margin-right: 1.25em;
    overflow: hidden;
    width: 50%;
    height: 20px;
}
.rate-line, .rate-data, .fill {
    display:inline-block;
}
.fill {
    background: #ff6292;
    height: 22px;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
  <span class="rate-line first-rl">
    <span class="fill"></span>
  </span>
  <span class="rate-data first-rd">4.56</span>
</div>

<div class="rating">
  <span class="rate-line first-rl">
    <span class="fill"></span>
  </span>
  <span class="rate-data first-rd">3.21</span>
</div>