使用Jquery+HTML写星星评分,jquery Html

 RorinL     2021年04月28日 星期三 19:02:11     JavaScript      模板样式    

类似于实现这样:

评分星星

这是一个用于评分的用Jquery+HTML写星星评分

—–

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>星星评分</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
        <!--引入jquery-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="box clear">
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="list">
        <i class="star1"></i>
        <i class="star"></i>
    </div>
    <div class="txt">非常好</div>
</div>
</body>
</html>

index.js:

$(function(){
//定义一个arr数组,值为:"非常差",'差',"一般","满意","非常满意"
    var arr=["非常差",'差',"一般","满意","非常满意"];
//鼠标经过
    $('.list').mouseover(function(){
        $(this).nextAll().find(".star1").css("z-index","0");//每次移动进去后,先让next所有同辈元素都是灰色星星
        $(this).find(".star1").css("z-index",1);//让移上去的哪个自己是黄色星星
        
        $(this).prevAll().find(".star1").css("z-index",1);//让移上去哪个星星的前面的所有同辈元素都是黄色星星
        $(".txt").text(arr[$('.box').find(".list").index($(this))]);//通过父元素,获得当前元素在父元素中的index
    })
})

来源:我在博客园的博客https://www.cnblogs.com/RorinL/p/14056213.html


暂无评论

发表回复

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...