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

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>

希望对您有所帮助! :)