星级评分系统

Question

我一直在寻找星级评定系统。 我需要一些非常简单且有效的方法！ 这是我尝试过的：

  $(':radio').change( function(){ $('.choice').text( this.value + ' stars' ); } ) 

  //reset, center n shiz (don't mind this stuff) *, ::after, ::before{ height: 100%; padding:0; margin:0; box-sizing: border-box; text-align: center; vertical-align: middle; } body{ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; &::before{ height: 100%; content:''; width:0; background:red; vertical-align: middle; display:inline-block; } } .star-rating{ font-size:0; white-space:nowrap; display:inline-block; width:250px; height:50px; overflow:hidden; position:relative; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; i{ opacity: 0; position: absolute; left: 0; top: 0; height: 100%; width: 20%; z-index: 1; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); background-size: contain; } input{ -moz-appearance:none; -webkit-appearance:none; opacity: 0; display:inline-block; width: 20%; height: 100%; margin:0; padding:0; z-index: 2; position: relative; &:hover + i, &:checked + i{ opacity:1; } } i ~ i{ width: 40%; } i ~ i ~ i{ width: 60%; } i ~ i ~ i ~ i{ width: 80%; } i ~ i ~ i ~ i ~ i{ width: 100%; } } //JUST COSMETIC STUFF FROM HERE ON. THESE AREN'T THE DROIDS YOU ARE LOOKING FOR: MOVE ALONG. //just styling for the number .choice{ position: fixed; top: 0; left:0; right:0; text-align: center; padding: 20px; display:block; } 

  <span class="star-rating"> <input type="radio" name="rating" value="1"><i></i> <input type="radio" name="rating" value="2"><i></i> <input type="radio" name="rating" value="3"><i></i> <input type="radio" name="rating" value="4"><i></i> <input type="radio" name="rating" value="5"><i></i> </span> <strong class="choice">Choose a rating</strong> 

那是从这个站点 。 如果我在某个地方犯了一个错误，请在下面的评论中更正它。 我在Google上搜索了更多内容，但不幸的是，它不起作用：/

Answer 1

您可以调整标记/ CSS并使用下面的方法（通过一些代码进行更新）来实现这一点，这是我早些时候写的。 请注意，这还将您的输入包装在一个更具语义的fieldset结构中，并且在当前悬停/当前选定的项目方面具有更好的UI。 如果是表格的一部分，相关值也将正确提交。

 $('.rating input').change( function() { $('#choice').text(this.value + ' stars'); } ) 

 .rating { float: left; border: none; } .rating:not(:checked) > input { position: absolute; top: -9999px; clip: rect(0, 0, 0, 0); } .rating:not(:checked) > label { float: right; width: 1em; padding: 0 .1em; overflow: hidden; white-space: nowrap; cursor: pointer; font-size: 200%; line-height: 1.2; color: #ddd; } .rating:not(:checked) > label:before { content: '★ '; } .rating > input:checked ~ label { color: #f70; } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: gold; } .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: #ea0; } .rating > label:active { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /> <label for="star5">5 stars</label> <input type="radio" id="star4" name="rating" value="4" /> <label for="star4">4 stars</label> <input type="radio" id="star3" name="rating" value="3" /> <label for="star3">3 stars</label> <input type="radio" id="star2" name="rating" value="2" /> <label for="star2">2 stars</label> <input type="radio" id="star1" name="rating" value="1" /> <label for="star1">1 star</label> </fieldset> <div id="choice"></div> 

Answer 2

我建议使用我建立的基于CSS的评分系统。 很容易理解和修改

HTML：

<formset id = "rating" class = "rating">
<input type = "radio" id = "r0"  name = "rating" checked = true style = "display:none;"> <label for = "r0" style = "display:none;"></label>
<input type = "radio" id = "r1"  name = "rating"> <label for = "r1"></label>
<input type = "radio" id = "r2"  name = "rating"> <label for = "r2"></label>
<input type = "radio" id = "r3"  name = "rating"> <label for = "r3"></label>
<input type = "radio" id = "r4"  name = "rating"> <label for = "r4"></label>
<input type = "radio" id = "r5"  name = "rating"> <label for = "r5"></label>
</formset>

CSS：

fieldset, label { margin: 0; padding: 0; }
.rating
{
  color: yellow;
}
formset > label, formset > input
{
  float: left;
}


formset > label::after
{
    content: '★ ';
    font-size: 50px;
    color: lightpink;
}

formset:hover > input:not(:checked) ~ label::after,
formset:not(:hover) > label::after,
formset:hover > input:checked ~ label::after
{
  color: orange;
}



formset:hover > input:checked ~ label:hover ~ label::after,
formset:hover > label:hover ~ label::after,
formset:not(:hover) > input:checked~label~label::after
{
  color: grey;
}

formset:hover > input:checked ~  label~ label::after,
formset:hover > label:hover ~ label::after
{
    color: lightpink;
}

formset:hover > label:hover~ input:checked~label~label::after
{
  color: grey;
}