Question

我已在Chrome扩展程序弹出窗口html中实施this star rating snippet并取得了成功：

这是我的实施：

.rating {
  float: left;
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 28px;
  margin-top: -11px;
  color: #e8d04c;
  margin-left: 10px;
  margin-right: 10px;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 0.7em;
  cursor: pointer;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
  content: "\2605";
  position: absolute;
}

<div id="divRating" class="rating">
  <span id="spanRatingExcellent" title="Excellent">☆</span>
  <span id="spanRatingGood" title="Good">☆</span>
  <span id="spanRatingFair" title="Fair">☆</span>
  <span id="spanRatingPoor" title="Poor">☆</span>
  <span id="spanRatingAwful" title="Awful">☆</span>
</div>

它的工作正常，只是这种方法没有为选定的星形“粘”提供方法。例如，如果用户点击4颗星，当鼠标指针离开时，我希望星标1-4保持高亮显示。相反，所有的星星都不会突出鼠标。但是如果再次使用鼠标悬停并点击一颗星，我需要正确的（原始）行为。再次，如果点击一颗星，所选的星星应该在鼠标移出时保持突出显示，任何未选择的星星（右侧）将保持不变亮。

纯CSS解决方案很酷，但我非常乐意使用jquery或javascript来实现这一目标。

提前致谢。

Answer 1

如果你想要一个纯CSS版本，那么Lea Verou提供了这个版本，并且链接到上面Actual Usage部分的文章。

它的工作原理是使用单选按钮来保存已选择星号的值。

See the JS fiddle here和explainer here.

这里她的代码被撤出了（没有说明这个解决方案，仅指向它）。

<fieldset class="rating">
    <legend>Please rate:</legend>
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>
</fieldset>

CSS：

.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.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;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.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;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

Answer 2

使用Rate Yo jQuery星级评分插件，数据属性

$(function () {
  $(".rateyo").rateYo().on("rateyo.change", function (e, data) {
    var rating = data.rating;
    $(this).parent().find('.result').text('rating :'+ rating);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
    <div class="rateyo" data-rateyo-rating="2.5" data-rateyo-num-stars="5"></div>
    <span class='result'>0</span>
</div>

Answer 3

这是使用纯JavaScript以及HTML和CSS的实现。

document.getElementById('divRating').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() != 'span') return;
  
  if (event.target.classList.contains('rated')) {
    event.target.classList.remove('rated');
  } else {
    Array.prototype.forEach.call(document.getElementsByClassName('rated'), function(el) {
      el.classList.remove('rated');
    });
    event.target.classList.add('rated');
  }
});

.rating {
  float: left;
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 28px;
  margin-top: -11px;
  color: #e8d04c;
  margin-left: 10px;
  margin-right: 10px;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 0.7em;
  cursor: pointer;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before,
.rating > span.rated:before,
.rating > span.rated ~ span:before {
  content: "\2605";
  position: absolute;
}

<div id="divRating" class="rating">
  <span id="spanRatingExcellent" title="Excellent">☆</span>
  <span id="spanRatingGood" title="Good">☆</span>
  <span id="spanRatingFair" title="Fair">☆</span>
  <span id="spanRatingPoor" title="Poor">☆</span>
  <span id="spanRatingAwful" title="Awful">☆</span>
</div>

如何让星级评分坚持下去？

3 个答案: