五星好评的效果

最新推荐文章于 2022-04-10 21:33:03 发布

Cryday

最新推荐文章于 2022-04-10 21:33:03 发布

阅读量194

点赞数

本文链接：https://blog.csdn.net/Cryday/article/details/82112791

版权

     <div class="order-list-Below">
            <h1>商品评价</h1>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="order-textbox">
                <textarea placeholder="在此输入商品评价"></textarea>
            </div>
        </div>

.order-list-Below ul {
  float: left;
  padding-left: 15px;
}
.order-list-Below ul li {
  float: left;
  width: 28px;
  height: 17px;
  background: url("../images/pic_heart01.png") no-repeat left top;
  background-size: 17px 17px;
}
.order-list-Below ul li.on {
  background: url("../images/pic_heart02.png") no-repeat left top;
  background-size: 17px 17px;
}
.order-list-Below .order-textbox {
  clear: both;
}
.order-list-Below .order-textbox textarea {
  width: 100%;
  height: 60px;
  padding: 5px;
  border: none;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: myFirstFont ;
  font-size: 13px;
  color: #ccc;
}

function(){ 
$(".order-list-Below ul li").click(
        var num = $(this).index()+1;
        var len = $(this).index();
        var thats = $(this).parent(".order-list-Below ul").find("li");
        // var thats = $(this).parent(".order-list-Below ul").find("li");
        if($(thats).eq(len).attr("class")=="on"){
            if($(thats).eq(num).attr("class")=="on"){
                $(thats).removeClass();
                for (var i=0 ; i<num; i++) {
                    $(thats).eq(i).addClass("on");
                }
            }else{
                $(thats).removeClass();
                for (var k=0 ; k<len; k++) {
                    $(thats).eq(k).addClass("on");
                }
            }
        }else{
            $(thats).removeClass();
            for (var j=0 ; j<num; j++) {
                $(thats).eq(j).addClass("on");
            }
        }
   );
 }