如何添加星级与html和css网格视图?

Question

我需要做一个学生可以评价老师的网页。在网页上，我想显示卡片动态将包含教师的名字和星级评级。从堆栈溢出的其他帖子中，我设法在页面上获得动态卡片和星级评级。现在寻求帮助，我有两个问题。

1. 我如何移动我的星星在卡片的中心和星星响应卡片的大小?
2. 我怎么能有独立的星型单选按钮?当前更改一个也会更改其他电台的值。下面是我的代码

谢谢!

$(document).ready(function() {
//Prepare Element selectors
var cssElem = $("#Dynam"), rowElem = $("#rows"), columnElem = $("#columns"), appElem = $("#app");
var noItems = $(".item").length,defaultColumns = 4;

//Init default state
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / defaultColumns) + "% - 1em);}");
columnElem.val(defaultColumns);
rowElem.val(Math.ceil(noItems / columnElem.val()));
//Add listeners to change
appElem.on("DOMSubtreeModified", function() {
noItems = $(".item").length;
rowElem.val(Math.ceil(noItems / columnElem.val()));
});
columnElem.on("change", function() {
rowElem.val(Math.ceil(noItems / columnElem.val()));
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
});
rowElem.on("change", function() {
columnElem.val(Math.ceil(noItems / rowElem.val()));
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
});
});
const COLORS = ['#FE9', '#9AF', '#F9A', "#AFA", "#FA7"];
function addItem(container, template) {
let color = COLORS[_.random(COLORS.length - 1)];
let num = _.random(10000);
let count = num;
container.append(Mustache.render(template, {
color,
num,
count
}));
}
$(() => {
const tmpl = $('#item_template').html()
const container = $('#app');
for (let i = 0; i < 5; i++) {
addItem(container, tmpl);
}
$('#add_el').click(() => {
addItem(container, tmpl);
})
container.on('click', '.del_el', (e) => {
$(e.target).closest('.item').remove();
});
});
$(document).ready(function(){
// Check Radio-box
$(".rating input:radio").attr("checked", false);
$('.rating input').click(function () {
$(".rating span").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(
function(){
var userRating = this.value;
alert(userRating);
}); 
});

.container {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.container .item {
min-height: 120px;
margin: 0.25em 0.5em;
overflow: hidden;
text-align:center
}
.rating {
float:left;
width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
position:absolute;
top:0px;
left:0px;
opacity:0;
}
.rating span label {
display:inline-block;
width:30px;
height:30px;
text-align:center;
color:#FFF;
background:#ccc;
font-size:30px;
margin-right:2px;
line-height:30px;
border-radius:50%;
-webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
background:#F90;
color:#FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="Dynam"></style>
<button id="add_el">Add element</button> rows:
<input id="rows" /> columns:<input id="columns" />
<div id="app" class="container">
</div>
<template id="item_template">
<div class="item" style="background: {{color}}">
<p>{{ num }}</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
<span><input type="radio" name="raiting" id="str5" value="5"><label for="str5"></label></span>
<span><input type="radio" name="raiting" id="str4" value="4"><label for="str4"></label></span>
<span><input type="radio" name="raiting" id="str3" value="3"><label for="str3"></label></span>
<span><input type="radio" name="raiting" id="str2" value="2"><label for="str2"></label></span>
<span><input type="radio" name="raiting" id="str1" value="1"><label for="str1"></label></span>
</div>
<p>
<button class="del_el">Delete</button>
</p>
</div>
</template>

Answer 1

星星的居中方式

$(document).ready(function() {
//Prepare Element selectors
var cssElem = $("#Dynam"), rowElem = $("#rows"), columnElem = $("#columns"), appElem = $("#app");
var noItems = $(".item").length,defaultColumns = 4;

//Init default state
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / defaultColumns) + "% - 1em);}");
columnElem.val(defaultColumns);
rowElem.val(Math.ceil(noItems / columnElem.val()));
//Add listeners to change
appElem.on("DOMSubtreeModified", function() {
noItems = $(".item").length;
rowElem.val(Math.ceil(noItems / columnElem.val()));
});
columnElem.on("change", function() {
rowElem.val(Math.ceil(noItems / columnElem.val()));
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
});
rowElem.on("change", function() {
columnElem.val(Math.ceil(noItems / rowElem.val()));
cssElem.html(".container .item {flex: 0 0 calc(" + (100 / columnElem.val()) + "% - 1em);}");
});
});
const COLORS = ['#FE9', '#9AF', '#F9A', "#AFA", "#FA7"];
function addItem(container, template) {
let color = COLORS[_.random(COLORS.length - 1)];
let num = _.random(10000);
let count = num;
container.append(Mustache.render(template, {
color,
num,
count
}));
}
$(() => {
const tmpl = $('#item_template').html()
const container = $('#app');
for (let i = 0; i < 5; i++) {
addItem(container, tmpl);
}
$('#add_el').click(() => {
addItem(container, tmpl);
})
container.on('click', '.del_el', (e) => {
$(e.target).closest('.item').remove();
});
});
$(document).ready(function(){
// Check Radio-box
$(".rating input:radio").attr("checked", false);
$('.rating input').click(function () {
$(".rating span").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(
function(){
var userRating = this.value;
alert(userRating);
}); 
});

.container {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.container .item {
min-height: 120px;
margin: 0.25em 0.5em;
overflow: hidden;
text-align:center
}
.rating {
display:flex;
width:100%;
justify-content: center;
}
.rating span { float:right; position:relative; }
.rating span input {
position:absolute;
top:0px;
left:0px;
opacity:0;
}
.rating span label {
display:inline-block;
width:30px;
height:30px;
text-align:center;
color:#FFF;
background:#ccc;
font-size:30px;
margin-right:2px;
line-height:30px;
border-radius:50%;
-webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
background:#F90;
color:#FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="Dynam"></style>
<button id="add_el">Add element</button> rows:
<input id="rows" /> columns:<input id="columns" />
<div id="app" class="container">
</div>
<template id="item_template">
<div class="item" style="background: {{color}}">
<p>{{ num }}</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
<span><input type="radio" name="raiting" id="str5" value="5"><label for="str5"></label></span>
<span><input type="radio" name="raiting" id="str4" value="4"><label for="str4"></label></span>
<span><input type="radio" name="raiting" id="str3" value="3"><label for="str3"></label></span>
<span><input type="radio" name="raiting" id="str2" value="2"><label for="str2"></label></span>
<span><input type="radio" name="raiting" id="str1" value="1"><label for="str1"></label></span>
</div>
<p>
<button class="del_el">Delete</button>
</p>
</div>
</template>