css/jquery 笑脸评价

最新推荐文章于 2024-08-13 23:52:07 发布

Aiences

最新推荐文章于 2024-08-13 23:52:07 发布

阅读量996

点赞数

分类专栏：移动端开发

本文链接：https://blog.csdn.net/qq_41283814/article/details/78722117

版权

移动端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>笑脸评价</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
<style>
 .smile_bad,.smile_med,.smile_good{
            width: 0.3rem;
            height: 0.3rem;
            background-repeat: no-repeat;
            display: inline-block;
        }
         .smile_bad{
            background-image:url("../img/bad_normal.png");
            background-size: 0.3rem;
        }
        .smile_med{
            background-image:url("../img/med.png");
            background-size: 0.3rem;
        }
        .smile_good{
            background-image:url("../img/good_normal.png");
            background-size: 0.3rem;
        }
        .bad_active{
            background-image:url("../img/bad-active@3x.png");
            background-size: 0.3rem;
        }
        .med_active{
            background-image:url("../img/med-active@3x.png");
            background-size: 0.3rem;
        }
        .good_active{
            background-image:url("../img/good-active@3x.png");
            background-size: 0.3rem;
        }
</style>
</head>
<body>
      <div class="smile_images">
                 <span  class="smile_bad"> </span>
                 <span class="smile_med"></span>
                 <span class="smile_good"></span>
      </div>
</body>

<script>
$(function(){
    $(".smile_bad").click(function(){
        $(".smile_bad").toggleClass('bad_active');
    });
    $(".smile_med").click(function(){
        $(".smile_med").toggleClass('med_active');
    });
    $(".smile_good").click(function(){
        $(".smile_good").toggleClass('good_active');
    });
})
</script>
</html>