Question

我使用html css做出了自己的星级评定，但是它不起作用。如果我使用direction: rtl或float: right可以工作，但是由于php我不能使用rtl或float：right。

如何使用纯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

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

<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 2

从您的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 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`;
}

如何进行简单的星级评定？

3 个答案: