[英]how to display rating based on number
I have a situation where i'm getting data
from database
like this 我遇到从这样的
database
获取data
的情况
var data = [ {name:'Alpha Hotel',price:400,star:3},
{name:'Beta Hotel',price:600,star:4},
{name:'Gamma Hotel',price:450,star:5},
];
i want to display as much rating
as my star
我想显示与我的
star
一样多的rating
for example for this data
{name:'Alpha Hotel',price:400,star:3}
my rating
should be 3
not 1
例如,该
data
{name:'Alpha Hotel',price:400,star:3}
我的rating
应该是3
而不是1
here is what i have tried: https://jsfiddle.net/ewL4wLvh/2/ 这是我尝试过的: https : //jsfiddle.net/ewL4wLvh/2/
While constructing the HTML, you need to repeat the spans
as many times as of stars. 构造HTML时,您需要重复
spans
为星号的次数。
You can use this neat trick to achieve this without using loops: 您可以使用此巧妙技巧来实现此目的,而无需使用循环:
htmlConstructed += '<p>Name : '+val.name+'</p>'+
'<p>Price : '+val.price+'</p>'+
'Rating :'+new Array(val.star + 1).join('<span><i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i></span>')+
'<hr/>';
Use loop
for form star
markup to be appended- 使用
loop
将表单star
标添加到附件中-
Array#fill
- The fill()
method fills all the elements of an array from a start index to an end index with a static value. Array#fill
- fill()
方法使用静态值填充数组的所有元素,从开始索引到结束索引。
Array#reduce
- The reduce()
method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value. Array#reduce
- reduce()
方法对累加器和数组中的每个元素(从左到右)应用一个函数,以将其减小为单个值。
var data = [{ name: 'Alpha Hotel', price: 400, star: 3 }, { name: 'Beta Hotel', price: 600, star: 4 }, { name: 'Gamma Hotel', price: 450, star: 5 }, ]; var htmlConstructed = ''; $.each(data, function(i, val) { var starStr = Array(val.star).fill(null).reduce((a) => a + '<i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i>', ''); htmlConstructed += '<p>Name : ' + val.name + '</p>' + '<p>Price : ' + val.price + '</p>' + 'Rating :<span>' + starStr + '</span><hr/>'; }); $('#content-area').append(htmlConstructed);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="content-area"></div>
您可以使用条件(如果是,如果是其他,则为elf),并检查它有多少颗恒星,然后显示它有多少颗恒星。
use Array.join
for times that you want repeat some element. 在需要重复某些元素的时间使用
Array.join
。
var data = [ {name:'Alpha Hotel',price:400,star:3},
{name:'Beta Hotel',price:600,star:4},
{name:'Gamma Hotel',price:450,star:5},
];
var htmlConstructed = '';
$.each(data,function(i,val){
htmlConstructed += '<p>Name : '+val.name+'</p>'+'<p>Price : '+val.price+'</p>'+'Rating :<span>'+
Array(val.star).join('<i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i>')
+'</span><hr/>';
});
$('#content-area').append(htmlConstructed);
you can use this simple solution. 您可以使用这个简单的解决方案。
var data = [ {name:'Alpha Hotel',price:400,star:3},
{name:'Beta Hotel',price:600,star:4},
{name:'Gamma Hotel',price:450,star:5},
];
var htmlConstructed = '';
$.each(data,function(i,val){
// console.log(val.name);
var rating='';
for(var i=0;i<val.star;i++){
rating = rating +'<span><i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i></span>';
}
htmlConstructed += '<p>Name : '+val.name+'</p>'+'<p>Price : '+val.price+'</p>'+'Rating :'+rating+'<hr/>';
});
$('#content-area').append(htmlConstructed);
Use this Code, 使用此代码,
var data = [ {name:'Alpha Hotel',price:400,star:3},
{name:'Beta Hotel',price:600,star:4},
{name:'Gamma Hotel',price:450,star:5},
];
var htmlConstructed = '';
$.each(data,function(i,val){
// console.log(val.name);
htmlConstructed += '<p>Name : '+val.name+'</p>'+'<p>Price : '+val.price+'</p>'+'Rating :'+ addStar(val.star) +'<hr/>';
});
function addStar(rating){
var returnString = '';
for(var i=0;i< rating;i++ )
returnString = returnString + '<span><i class="fa fa-star" aria-hidden="true" style="color:#D91E18;"></i></span>';
return returnString;
}
$('#content-area').append(htmlConstructed);
Fiddle: https://jsfiddle.net/r83wnpqr/ 小提琴: https : //jsfiddle.net/r83wnpqr/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.