Question

找到解决方案Here

实时完成预览Here

如果有人需要帮助做同样或类似的事情，请随时提出id很乐意提供帮助

我创建了一个5星反馈系统，用SQL将数据提交到数据库。除了表单外，一切都很好，我想要它。我目前有5个比率按钮提交所选的评级编号，但我希望它们是我个性化明星的图像

和

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

这是一个Live Preview 和我目前的比率按钮代码

         else
         {
            volunteer = OTHER_PRICER;
            message = "a non-clothing donation";
         }
      // ^ was missing
     }

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.

5星级反馈表

1 个答案: