5星级反馈表

Question

找到解决方案Here

实时完成的预览Here

如果任何人需要帮助做相同或类似的事情，请随时询问我很乐意提供帮助

我已经创建了一个五星级反馈系统，用SQL将数据提交到数据库。所有的工作都很好，就像我想要的那样，除了表单。我目前有5个比例按钮，提交选定的评级数字，但我希望他们是我的个性化明星的形象

和

当用户选择1颗星时，它将更改为我的第二颗星图像，当他们选择更多星时，它会将其他星更改为他们选择的星的数量

下面是比率按钮的Live Preview和我的当前代码

<div class="rating">
<label class="rating">1
    <input name="rating" type="radio" class="ratingbtn" value="1" <?php if (isset($rating) && $rating=="1") echo "checked";?>>
    2 </label>
  <input type="radio" name="rating" <?php if (isset($rating) && $rating=="2") echo "checked";?> value="2">
  3
  <input type="radio" name="rating" <?php if (isset($rating) && $rating=="3") echo "checked";?> value="3">
  <label> 4</label>
  <input type="radio" name="rating" <?php if (isset($rating) && $rating=="4") echo "checked";?> value="4">
  <label>5</label>
  <input type="radio" name="rating" <?php if (isset($rating) && $rating=="5") echo "checked";?> value="5">
</div>

Answer 1

您的标记应如下所示：

<div>
    <div class="star belowchecked">
        <input type="radio" name="rating" value="1">
    </div>
   <div class="star">
        <input type="radio" name="rating" value="2">
    </div>
   <div class="star">
        <input type="radio" name="rating" value="3">
    </div>
   <div class="star">
        <input type="radio" name="rating" value="4">
    </div>
   <div class="star">
        <input type="radio" name="rating" value="5">
    </div>
</div>

和要匹配的css：

.star{


   display: inline-block;
    position: relative;
    cursor: pointer;
    margin-right: 8px;
    transition: all .25s ease;
}

.star:active {
    transform: scale(0.75);
}
.star:after {
    content:"";
    display: block;
    top: -5px;
    left: -5px;
    position: absolute;
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    background-image: url("//cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/star.png");
    background-size: cover;
}

.star.belowchecked:after {
     content:"";
    display: block;
    top: -5px;
    left: -5px;
    position: absolute;
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    background-image: url("//findicons.com/files/icons/1620/crystal_project/128/keditbookmarks.png");
    background-size: cover;
}

和jQuery来展示星星：

 $(function () {

    $(".star").click(function () {
        var x = $(this).find("input[type='radio']");
        var val = x.val();
        x.attr("checked", true);
        $(".star input[type='radio']").each(function () {
            if ($(this).val() <= val) {
                $(this).parent().addClass("belowchecked");
            } else {
                $(this).parent().removeClass("belowchecked");
            }
        });
    });

});

Here's a fiddle.