Question

我需要配置一个5启动评级系统。我有css / html准备好显示星星。我需要的是当用户选择一个它应该显示它当前它没有显示的星形时。我将使用JS / Jquery / HTML或CSS。

以下是我的代码。

<html>
<head>
<title>5 star Rating!</title>
<style>

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  /*width: 1.1em;*/
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
   cursor: pointer;
}

span {
    font-size:120px;
    color:#f5f5f5;
    text-shadow: 0px 5px 5px #000;
}


body { 
    background-image: url('https://sap.quickbase.com/up/biv7kj2ug/g/rh/eh/va/canvas-ptrn.jpg');
}

.wrapper {
    background-color: #55A0EF;
    height:175px;
    width: 100%;
    opacity: 0.7;
    box-shadow: 0px 2px 3px #000;
    left: 0px;
    right: 0px;
    position: absolute;
}

h1 {
    text-shadow: -1px -1px 0px #000, 1px 1px 0px #fff;
    color: #535353;
    font-family: Arial Narrow, Helvetica, sans-serif;
    font-size: 100px;
    text-transform: uppercase;
    letter-spacing: -5px;
    opacity: 0.7;
}

</style>

</head>

<body>
<center>
<h1>Star Rating</h1><br />
<div class="wrapper">
<div class="rating">
<span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
</div>
</div>
</center>
</body>
</html>

Answer 1

我申请了@ K.B.M

的代码

SEE DEMO

添加了这个css

.selected{color:gold;}

和javascript

$('.star').on('click', function(){
        $('.star').addClass('selected');
        var count = $(this).attr('name'); 
        for (var i=0; i<count-1; i++){        
            $('.star').eq(i).removeClass('selected');
        }
    });

显示5星评级的选择

1 个答案: