点击星后在表单中设置星值

Question

我正在实施星级评分并在表单中使用 awesome star 字体，但我不知道如何设置星级值。我有很多这种形式的值，比如输入和按钮。但是我不知道怎么给star设置值。

.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: "05";
   position: absolute;
}

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

我想设置星号。单击星星后，星星应该是黑色的。

Answer 1

由于您的 CSS/HTML 逻辑设置了反向星号，您可以使用跨度索引并将其存储在隐藏字段中，例如，

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

看看fiddle here。这里的 for 是恢复当前索引（因为索引总是从 0 开始，4 将是我们的最大值）并加上 1 将其设置为从 1 到 5。

Answer 2

Use some js/jQuery to apply active class for current element, replace span with label and radio inside

$(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: "05";
  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 3

不幸的是，使用纯 CSS && HTML 无法实现此目的。您将编写某种脚本来切换星星的 classes/state...

我有一个使用 jQuery API 的工作演示，这使得该演示非常简洁...检查一下！

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Star Rating Demo</title>
    <link rel="stylesheet" type="text/css" href="./font-awesome.min.css">
</head>
<body>
    <h1>Star Rating Demo</h1>

    <div class="rating">
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
    </div>



<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
    jQuery(".fa-star-o, .fa-star")
        .on("click, mouseover", function (event) {

        var star = jQuery(this)

        jQuery(star).removeClass("fa-star-o").addClass("fa-star")
            .prevAll()
            .removeClass("fa-star-o").addClass("fa-star")

        jQuery(star).nextAll()
            .removeClass("fa-star").addClass("fa-star-o")
    })
</script>
</body>
</html>

点击星后在表单中设置星值

Set star value in form after click on star

html

javascript

css

jquery

font-awesome