如何制作简单的星级评分？

Question

我使用 html css 进行了自己的星级评分，但它并不适用。如果我使用 direction: rtl 或 float: right 它可以工作，但我不能使用 rtl 或 float:right 因为 php。

我怎样才能用纯 css 和 html 制作它？

$('.stars a').on('click', function(){
	$('.stars a').removeClass('active');
	$(this).addClass('active');
});

.stars input {
    position: absolute;
    left: -999999px;
}

.stars a {
    display: inline-block;
    font-size: 0;
    text-decoration: none;
}

.stars a:before {
    position: relative;
    font-size: 18px;
    font-family: 'FontAwesome', serif;
    display: block;
    content: "\f005";
    color: #9e9e9e;
}

.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<p class="stars">
  <span>
    <a class="star-1" href="#">1</a>
    <a class="star-2" href="#">2</a>
    <a class="star-3" href="#">3</a>
    <a class="star-4" href="#">4</a>
    <a class="star-5" href="#">5</a>
  </span>
</p>

Answer 1

从您的 HTML 开始，我尝试反转颜色的变化，因为纯 CSS + 和 ~ 仅适用于下一个元素。那你为什么不把下一个a设为灰色而不是蓝色呢？

我尝试只使用您的 CSS，但我还必须添加一个类来处理活动情况。对不起：P

这是结果：

$('.stars a').on('click', function(){
  $('.stars span, .stars a').removeClass('active');

  $(this).addClass('active');
  $('.stars span').addClass('active');
});

.stars input {
    position: absolute;
    left: -999999px;
}

.stars a {
    display: inline-block;
    padding-right:4px;
    text-decoration: none;
    margin:0;
}

.stars a:after {
    position: relative;
    font-size: 18px;
    font-family: 'FontAwesome', serif;
    display: block;
    content: "\f005";
    color: #9e9e9e;
}


span {
  font-size: 0; /* trick to remove inline-element's margin */
}

.stars a:hover ~ a:after{
  color: #9e9e9e !important;
}
span.active a.active ~ a:after{
  color: #9e9e9e;
}

span:hover a:after{
  color:blue !important;
}

span.active a:after,
.stars a.active:after{
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<p class="stars">
  <span>
    <a class="star-1" href="#">1</a>
    <a class="star-2" href="#">2</a>
    <a class="star-3" href="#">3</a>
    <a class="star-4" href="#">4</a>
    <a class="star-5" href="#">5</a>
  </span>
</p>

希望对您有所帮助！ :)

Answer 2

这里使用单选按钮来实现效果

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

https://codepen.io/jamesbarnett/pen/vlpkh

Answer 3

HTML

    <div class="rating" tabindex="1" onblur="calculateRating(this)">
      <i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
      <i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
    </div>
    <div class="rating-display"></div>

CSS

.clicked{
color:yellow;}

JAVASCRIPT

var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");

//add event listener
function clickStar(ele){
  var clickedStar = ele;
  //value of the star
  var ratingValue = parseInt(clickedStar.getAttribute("value"));
  //change the color of the star
  for(var i=0; i<ratingValue; i++){
    rating.children[i].classList.add("clicked");
    for(var j=ratingValue; j<=4; j++){
      if(rating.children[j].classList.contains("clicked")){
        rating.children[j].classList.remove("clicked");
      }
    }
  }
}

//function to calculate rating
function calculateRating(ele){
  //check how many elements are having clicked class
  var ratingCount = 0;
  for(var i=0; i<ele.children.length; i++){
    if(ele.children[i].classList.contains("clicked")){
      ratingCount++;
    }
  }
  ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}

Answer 4

使用纯 JavaScript 进行简单的星级评分。

HTML

<div id="rating_bar"> </div>

CSS

#rating_bar {
    width:100px;
    height:100px;
    display:inline-block;
    display:inline;
}

Javascript

var content ='';
  for(var i=1;i<=5;i++)
  content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
 
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
  spans[i].onmouseover=hoverStar;
  
function hoverStar() 
{
  for(i=0;i<this.id.charAt(5);i++)
    spans[i].innerText='⭐';
  for(i=this.id.charAt(5);i<5;i++)
    spans[i].innerText='✰';
}

样本输出：

Answer 5

Simple star rating

function myFunction() {
var five = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = five;

}

/* component */

.star-rating {
  
  display:flex;
  flex-direction: row-reverse;
  font-size:3em;
  justify-content:space-around;
  padding:0 .2em;
  text-align:center;
  width:5em;
}

.star-rating input {
  display:none;
}

.star-rating label {
  color:#ccc;
  cursor:pointer;
}

.star-rating :checked ~ label {
  color:#f90;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color:#fc0;
}

<div class="star-rating">
  <input type="radio" id="5-stars" name="rating" value="5" />
  <label for="5-stars" class="star">&#9733;</label>
  <input type="radio" id="4-stars" name="rating" value="4" />
  <label for="4-stars" class="star">&#9733;</label>
  <input type="radio" id="3-stars" name="rating" value="3" />
  <label for="3-stars" class="star">&#9733;</label>
  <input type="radio" id="2-stars" name="rating" value="2" />
  <label for="2-stars" class="star">&#9733;</label>
  <input type="radio" id="1-star" name="rating" value="1" />
  <label for="1-star" class="star">&#9733;</label>
</div>
<p id="one" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>