大佬教程收集整理的这篇文章主要介绍了创建基于 API 的星级评分系统，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个 API，它会在“评级”下给出 1-5 的数字，我还有一个 5 星的列表，根据评级，这些星在点击按钮时会变成红色或黑色，红色将用于 raTings 中的每个数字。即评级为 4 会使 4 颗星变为红色，1 颗变为黑色。到目前为止，我已经创建了 HTML 和 CSS，但是当按下按钮时，我根本没有收到任何数据来测试按钮，我添加了一个基本的警报并且有效。到目前为止，我有这个：
$("#vIEwrevIEw").click(function(){
$.AJAX("API link").done(function(data){
$(".revIEwblk").HTML('');
var HTMLstr = '';
for(var i=0; i<data.length; i++){
var raTing = parseInt(data[i]["raTing"]);
var chk = ['','',''];
for(var j=0; j<raTing && j<5;j++){
chk[j] = 'checked';
}
HTMLstr += '<div class="prevIEw"><img src="revIEwicon1.jpg" alt="revIEwpic" class="revimg" /><div class="stars"><p class="checked '+chk[0]+'"></p><p class="checked '+chk[1]+'"></p><p class="checked '+chk[2]+'"></p><p class="checked '+chk[3]+'"></p><p class="checked '+chk[4]+'"></p></div><h3 class="personname">'+data[i]["nickname"]+'</h3><div class="revtext"><p>'+data[i]["revIEw"]+'</p></div></div><hr />';
}
$(".revIEwblk").HTML(HTMLstr);
});
}).productrevIEws{ /*sets Font*/
Font-family: 'Roboto Condensed',sans-serif;
}
.prevIEw{ /*sets padding for how the div is displayed*/
padding-left: 60px;
padding-top: 30px;
padding-bottom: 30px;
display: block;
position: relative;
}
.revimg{ /*gives images curved edges*/
border-radius: 10px;
display: inline;
}
.personname{ /*sets the person name so that it is to the right of the image and just below the stars*/
display: inline;
position: absolute;
padding-left: 30px;
padding-top: 20px;
wIDth: 150px;
}
.stars{ /*sets stars elements to above name and to the right of the image*/
position: absolute;
wIDth: 100px;
top: 30px;
left: 180px;
}
.revtext{ /* displays the text div so that it is to the right sIDe of the prevIEw Box*/
display: inline;
wIDth: 550px;
position: absolute;
right: 0;
Font-size: 15px;
Font-weight: 600;
top: 10px;
}
.revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
word-wrap: break-word;
overflow: hIDden;
text-overflow: ellipsis;
}
.btnrevIEw{ /* setTing the padding for the buton aswell as the color so that the text is white and the button itself is red,aswell as giving it curved edges.*/
padding: 10px 25px;
BACkground-color: #F0191c;
color: white;
border: none;
border-radius: 10px;
}
.btnrevIEw:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
BACkground-color: #8a130b;
cursor: pointer;
}
.btnblk{/* padding the button insIDe its div*/
padding: 25px;
text-align: center;
}<script src="https://cdnjs.cloudFlare.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script>
<article class="productrevIEws"> <!--List of product revIEws-->
<hr />
<h1 ID = "productrevIEwheader">Product RevIEws <span class="checked">*****</span></h1>
<hr />
<div class="revIEwblk">
<div class="prevIEw">
<img src="images/robot-juice-images/revIEwicon1.jpg" alt="revIEwpic" class="revimg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personname">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sAPIente odit porro in quam eos autem nobis quisquam reicIEndis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates,@R_746_10586@m excepturi? Lorem ipsum dolor,sit amet consectetur adipisicing elit. disTinctio accusantium,neque vel,rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr />
<div class="prevIEw">
<img src="images/robot-juice-images/revIEwicon1.jpg" alt="revIEwpic" class="revimg" />
<div class="stars">
<p class = "checked">***<span class="unchecked">**</span></p>
</div>
<h3 class="personname">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sAPIente odit porro in quam eos autem nobis quisquam reicIEndis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates,rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="prevIEw">
<img src="images/robot-juice-images/revIEwicon1.jpg" alt="revIEwpic" class="revimg" />
<div class="stars">
<p class = "checked">****<span class="unchecked">*</span></p>
</div>
<h3 class="personname">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sAPIente odit porro in quam eos autem nobis quisquam reicIEndis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates,rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="prevIEw">
<img src="images/robot-juice-images/revIEwicon2.jpg" alt="revIEwpic" class="revimg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personname">This juice just keeps me going..</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sAPIente odit porro in quam eos autem nobis quisquam reicIEndis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates,rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="revIEwblk">
<div class="prevIEw">
<img src="images/robot-juice-images/revIEwicon1.jpg" alt="revIEwpic" class="revimg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personname">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sAPIente odit porro in quam eos autem nobis quisquam reicIEndis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates,rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="btnblk">
<button class="btnrevIEw" ID="vIEwrevIEw">READ ALL REVIEWS</button>
</div>
</article>
请考虑以下事项。
$("#viewreview").click(function() {
$.ajax("api link").done(function(data) {
$(".reviewblk").html('');
var raTing,preview,stars;
$.each(data,function(i,el) {
preview = $("<div>",{
class: "preview"
}).appendTo(".reviewblk");
$("<img>",{
src: "reviewicon1.jpg",alt: "Review Icon",class: "revImg"
}).appendTo(preview);
stars = $("<div>",{
class: "stars"
}).appendTo(preview);
raTing = parseInt(el.raTing);
for (var i = 1; i <= 5; i++) {
$("<p>",{
class: (i <= raTing ? "checked" : "unchecked")
}).appendTo(stars);
}
$("<h3>",{
class: "personName"
}).html(el.nickName).appendTo(preview);
$("<div>",{
class: "revText"
}).html("<p>" + el.review + "</p>").appendTo(preview);
$("<hr>").appendTo(preview);
});
});
});
我们可以使用 jQuery 来创建元素并在创建时附加它们。使用 $.each()，我们可以迭代 data 中的每个项目。我们也知道将有 5 个“检查”项目，因此我们可以简单地创建一个小循环来创建它们。其中一些，等于 raTing 将被“检查”，因此我们可以添加一个条件来检查每个并根据需要标记。
例如，如果 raTing 为 3，我们会看到：
<p class="checked"></p>
<p class="checked"></p>
<p class="checked"></p>
<p class="unchecked"></p>
<p class="unchecked"></p>
i 在第一次迭代时将是 1，并且 1 小于 3。在第三次循环中，i 将是 3 并且仍然满足条件。当 i 为 4 或 5 时，它不再是 true，因此提供 unchecked。
以上是大佬教程为你收集整理的创建基于 API 的星级评分系统全部内容，希望文章能够帮你解决创建基于 API 的星级评分系统所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。