点击星号后在表格中设置星号

Question

我正在实施星级评分并且在我的表单中使用字体真棒星，但我不知道如何设置星级值。我在这种形式中有许多值，如输入和按钮。但我不知道如何设定恒星的价值。

https://css-tricks.com/star-ratings/

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  float:left;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

<form>
  <div class="rating"> 
     <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
  </div>
</form>
  

我想在star中设置值。点击星星后，星星应为黑色。

Answer 1

使用一些js / jQuery为当前元素应用active类，将span替换为label并将radio替换为

$(document).ready(function() {
  $('label').click(function() {
    $('label').removeClass('active');
    $(this).addClass('active');
  });
});

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  float: left;
}
.rating > label {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > label.active:before,
.rating > label.active ~ label:before,
.rating > label:hover:before,
.rating > label:hover ~ label:before {
  content: "\2605";
  position: absolute;
}
input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="rating">
    <label>☆
      <input type="radio" name="starValue" value="5" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="4" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="3" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="2" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="1" />
    </label>
  </div>
</form>

Answer 2

当您的CSS / HTML逻辑设置反向星形时，您可以使用span的索引并将其存储在隐藏字段中，例如，

$('.rating span').on('click',function(){
    $('#rate_holder').val(4-$(this).index()+1);
    console.log($('#rate_holder').val());
});

查看fiddle here。 这里是为了还原当前索引（因为索引总是从0开始，4将是我们的最大值），再加上1将其从1设置为5。

Answer 3

不幸的是，现在可以使用纯CSS＆amp;＆amp; HTML。 你会用某种脚本来切换星星的类/状态......

我有一个使用jQuery API的工作演示，这使得这个演示非常简洁......看看吧！

suggest