jQuery模仿淘宝商品评价

时间 2019-11-11 标签 jquery 模仿淘宝商品评价

　　最近作项目要作个商品评价的功能，我直接就跑到淘宝那里去研究了，可看着晕晕的，还不知道他是怎么作的，因而把图抠了下来，本身写了一个，接下来就展现一下我是怎么作的，你们有不一样的实现方法可要记得分享一下呀。css

　　通过研究，我发如今脚本事件上来讲，就分三个事件，鼠标移入事件，鼠标离开事件和点击事件。移入就让鼠标移入的星星和以前的星星都变色，点击在移入的基础上保存了当前点击的星星位置，离开则恢复到上次点击的那个星星。从样式上来讲，这些星星能够共用一个图片，切换星星时让图片的一部分展现出来就能够了。html

　　这里展现Demo就只搞三个星星了，星星右边的文字提示也不弄了。这里用无连接的连接标签来放星星，使用连接有个好处就是若是之后要在点击星星时触发服务器的操做，好比点击星星直接完成评价操做，就能够直接用了，再用一个隐藏input来存放最近一次点击的星星的值：jquery

<div id="rating-star">
    <a href="#">0</a>
    <a href="#">1</a>
    <a href="#">2</a>
</div>

　　接着给rating-star和连接一个样式，切换图片的关键只须要修改background-position就能够了：服务器

#rating-star {
    margin: 50px;
}

    #rating-star a {
        background: url(commentstar.png) no-repeat 0 -90px;
        display: inline-block;
        height: 23px;
        text-indent: -999em;
        width: 23px;
    }

　　最后就是关键的脚本了：函数

        $('#rating-star').on('click', 'a', function () {
            $('#rating-star').data('star', this.innerHTML);
        }).on('mouseenter', 'a', function () {
            setStar(this);
        }).on('mouseleave', 'a', function () {
            var $r_star = $('#rating-star');
            var level = $r_star.data('star');
            var $stars = $r_star.find('a');
            if (level) {
                setStar($stars[level]);
            } else {
                $stars.css('background-position', '0 -90px');
            }
        });

        function setStar(star) {
            var $this = $(star);
            var level = $this.html();
            var n;
            if (level == '2') {
                n = '0 -30px';
            } else if (level == '1') {
                n = '0 0';
            } else {
                n = '0 -60px';
            }
            $this.prevAll().andSelf().css('background-position', n);
            $this.nextAll().css('background-position', '0 -90px');
　　　　 }

　　这里有必要解释一下个人思路，能够看到点击事件只是给隐藏控件赋值，没作其余事，原本点击事件是要变换图片的，这事我发现鼠标移入事件已经作了，因此我就再也不重复了，而后你会发现鼠标移入和离开最终都调用了setStar函数，那个方法其实就是把传入的星星以及他以前的星星改为相应的图片，把传入的星星以后的星星改为无颜色的星星，其实setStar也能够原html对象的数字下标，这样也能够用jquery的slice来实现。有些同志可能不知道'0 -30px'这些的是干什么的，其实'0 0'就是在本来默认的图片展现，-30px意思就是在y轴上把图片向上移动30个像素，这样在连接大小限定为长宽都为23px的状况下，咱们看到的就是好评图片了，'0 0'对应的就是中评图片，'0 -60px'对应的就是差评图片，'0 -90px'对应的就是还没评价的图片。把本来的四个图片合成一张图片有什么好处呢，能够减小请求数，写代码也比较方便吧，估计脚本性能也会好点。性能

jQuery模仿淘宝商品评价

亲自试一试

　　亲自试一试