JQuery 淘宝评分

白沙王

已于 2023-06-17 16:35:59 修改

阅读量69

点赞数

文章标签： jquery 前端 javascript

于 2023-06-17 16:35:37 首次发布

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131261942

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JQuery/jquery-1.7.1.min.js"></script>
    <script>
        //创建变量用来存储点击事件的id
        var index;
        //加载
        $(function () {

            $('img').click(function () {
                index = parseInt($(this).attr('id'))+1;
            });

            //创建img的鼠标指向移开事件
            $('img').hover(function () {
                //指向事件，指向的图片及指向之前的图片变亮，之后的图片变暗
                $(this).attr('src', 'Images/star2.png').prevAll().attr('src', 'Images/star2.png').end().nextAll().attr('src', 'Images/star1.png');
            }, function () {
                //移开事件，先执行全部变灰
                $('img').attr('src', 'Images/star1.png');
                //值小于等于index的img图片变亮
                $('img:lt('+ index +')').attr('src', 'Images/star2.png');
                });
              
        });
    </script>
</head>
<body>
    <img src="Images/star1.png" id="0" />
    <img src="Images/star1.png" id="1"/>
    <img src="Images/star1.png" id="2"/>
    <img src="Images/star1.png" id="3"/>
    <img src="Images/star1.png" id="4"/>
</body>
</html>