Question

$('.ratings_stars').click(function() {
  $('.ratings_stars').removeClass('selected'); // Removes the selected class from all of them
  $(this).addClass('selected');
  var rating = $(this).data('rating'); // Get the rating from the selected star

  $('#rating').val(rating); // Set the value of the hidden rating form element
});

fa-star {
  color: rgba(112, 111, 111, 0.856);
}

.fa-star:hover {
  color: #e2334c;
}

.fa-star.selected {
  color: #001628;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="rating" name="rating" value="-1">
<div class="rating">
  <i class="ratings_stars fa fa-star" data-rating="1"></i>
  <i class="ratings_stars fa fa-star" data-rating="2"></i>
  <i class="ratings_stars fa fa-star" data-rating="3"></i>
  <i class="ratings_stars fa fa-star" data-rating="4"></i>
  <i class="ratings_stars fa fa-star" data-rating="5"></i>
</div>

单击一颗星星之前，另一颗星星没有被单击，但已正确保存到数据库中。

Answer 1

使用prevAll()和nextAll()

$('.rating').on('click', '.ratings_stars', function () {
  var star = $(this)
  star.addClass('selected')
  star.prevAll().addClass('selected')
  star.nextAll().removeClass('selected')
  $('#rating').val(star.data('rating'))
});

.fa-star {
  color: rgba(112, 111, 111, 0.856);
}

.fa-star:hover {
  color: #e2334c;
}

.fa-star.selected {
  color: #001628;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="hidden" id="rating" name="rating" value="-1">
<div class="rating">
  <i class="ratings_stars fa fa-star" data-rating="1"></i>
  <i class="ratings_stars fa fa-star" data-rating="2"></i>
  <i class="ratings_stars fa fa-star" data-rating="3"></i>
  <i class="ratings_stars fa fa-star" data-rating="4"></i>
  <i class="ratings_stars fa fa-star" data-rating="5"></i>
</div>

Answer 2

作为替代方案，可以完全依靠HTML和CSS依靠无线电输入和相应标签的位置来完成此操作。此解决方案提供了一个重置选项，施加了悬停效果，并允许键盘输入：

document.addEventListener("input", e => console.log("rating: %s", e.target.value));

/* activate all stars by default */
.rating-container .fa-star {  
  color: #000;
}

/* deactivate stars following the selected option, skipping the adjacent label */
.rating-checkbox:checked+label~.fa-star,
/* deactivate undo */
.rating-container .fa-undo {
  color: #808080;
}

/* highlight all stars on hover */
.rating-container:hover label.fa-star,
/* highlight undo on hover */
.rating-checkbox:hover+label.fa-undo
{  
  color: #F00;
}

/* deactivate stars following the hovered option, skipping the adjacent label */
.rating-checkbox:hover+label~.fa-star { 
  color: #808080;
}

.rating-container {
  position: relative;
  display: inline-flex;
}

.rating-checkbox {
  /* let the label take care of the display */
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

.rating-container label {
 display: inline-block;
 padding: 2px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="rating-container">
  <input class="rating-checkbox" value="-1" type="radio" name="rating" id="rating_0" checked>
  <label for="rating_0" class="fa fa-undo"></label>
  <input class="rating-checkbox" value="1" type="radio" name="rating" id="rating_1">
  <label for="rating_1" class="fa fa-star"></label>
  <input class="rating-checkbox" value="2" type="radio" name="rating" id="rating_2">
  <label for="rating_2" class="fa fa-star"></label>
  <input class="rating-checkbox" value="3" type="radio" name="rating" id="rating_3">
  <label for="rating_3" class="fa fa-star"></label>
  <input class="rating-checkbox" value="4" type="radio" name="rating" id="rating_4">
  <label for="rating_4" class="fa fa-star"></label>
  <input class="rating-checkbox" value="5" type="radio" name="rating" id="rating_5">
  <label for="rating_5" class="fa fa-star"></label>
</div>

检出adjacent sibling combinator（+）和general sibling combinator（~）。

Answer 3

没有任何jQuery的简单解决方案：

const stars = document.querySelectorAll('.ratings_stars');

document.addEventListener('click', (evt) => {
  if (evt.target.classList.contains('ratings_stars')) {
    let clicktargetReached = false;
    for (const star of stars) {
      star.classList[clicktargetReached ? 'remove' : 'add']('selected');
      if (star === evt.target) {
        clicktargetReached = true;
      }
    }
    result.textContent = evt.target.dataset.rating;
  }
});

fa-star {
  color: rgba(112, 111, 111, 0.856);
}

.fa-star:hover {
  color: #e2334c;
}

.fa-star.selected {
  color: #a00;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="rating">
  <i class="ratings_stars fa fa-star" data-rating="1"></i>
  <i class="ratings_stars fa fa-star" data-rating="2"></i>
  <i class="ratings_stars fa fa-star" data-rating="3"></i>
  <i class="ratings_stars fa fa-star" data-rating="4"></i>
  <i class="ratings_stars fa fa-star" data-rating="5"></i>
</div>
<div id="result"></div>

Answer 4

此演示利用了每个星星的索引位置。悬停效果是纯CSS：

将display: flex分配给星星的父标签
颠倒星星的顺序，并以相反的顺序分配order属性。
请记住，三元条件也要反转（A行）
将此CSS规则集添加到原始:hover规则集
```
.star:hover~.star 
```

$('.rating').on('click', '.star', function() {
  let point = $(this).index();
  $('.star').each(function(index) {
    return index >= point ? $(this).addClass('selected') : 
    $(this).removeClass('selected'); //A
  });
  $('#rating').val($(this).data('rating'));
  console.log($('#rating').val());
});

.rating {
  display: flex;
  justify-content: space-evenly;
  width: 25%;
}

.star {
  display: inline-block;
  color: rgba(112, 111, 111, 0.856);
  cursor: pointer;
}

.star.selected {
  color: #001628;
}

.star:hover,
.star:hover~.star {
  color: #e2334c;
}

.as-console-wrapper {
  max-height: 25px !important
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

<input id="rating" name="rating" type="hidden" value="">
<div class="rating">
  <i class="star fa fa-star" data-rating="5" style='order:5'></i>
  <i class="star fa fa-star" data-rating="4" style='order:4'></i>
  <i class="star fa fa-star" data-rating="3" style='order:3'></i>
  <i class="star fa fa-star" data-rating="2" style='order:2'></i>
  <i class="star fa fa-star" data-rating="1" style='order:1'></i>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

星级评定如何启用如果单击了星级，也要单击先前的星级

4 个答案: