评级系统与明星 [英] Rating system with stars

问题描述

我正在寻找一个星级评分系统。我需要一些非常简单且有效的东西！以下是我的尝试：

I am looking long time for a star rating system. I need something that is quite simple and that works! Here is what i've tried:

    $(':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>

来自本网站。如果我在某处犯了错误，请在下面的评论中更正。我搜索了更多的东西，但遗憾的是，不起作用：/

That is from THIS SITE. If i maked a mistake somewhere, please correct it in the comments below. I googled more much things, but sadly, doesn't work :/

推荐答案

你可以调整你的标记/ CSS并实现这一点通过使用下面的方法（用你的一些代码更新），我写了一些时间。请注意，这也会将您的输入包含在更加语义的 fieldset 结构中，以及在当前悬停/当前选定项目方面更好的UI。如果表单的一部分，相关值也将被正确提交。

You can tweak your markup/CSS and achieve this by using the below approach (updated with some of your code), which I wrote some time back. Note that this also wraps your inputs within a more semantic fieldset structure, as well as better UI in terms of currently hovered / currently selected items. If part of a form, the relevant value will also be correctly submitted.

$('.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>

这篇关于评级系统与明星的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！