22.仿淘宝五角星评论(链式编程隐式迭代)

Posted alex-xxc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了22.仿淘宝五角星评论(链式编程隐式迭代)相关的知识,希望对你有一定的参考价值。

试玩(淘宝案例在下面):

效果:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            /*去除文字字符的间距的三种方法*/
            /*父盒子字号为0*/
            /*font-size: 0;*/
            /*设置字符间距为0*/
            /*letter-spacing: 0;*/
            /*设置文字间距为0*/
            /*word-spacing: 0;*/
        }
        li{
            color: red;
            float: left;  /*如果把他换成display: inline-block;两个li之间就会有空格,想要去除参照ul写的方法*/
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <script>
        $(function () {
            var wjx_none="",wjx_sel="";
            $(".comment li").mouseenter(function () {

                //prevAll()是前面的所有兄弟结点,nextAll()是后面的所有兄弟结点。
//                $(this).text(wjx_sel).prevAll().text(wjx_sel);
//                $(this).nextAll().text(wjx_none);
                //当执行jQuery时,上面那种方法链式编程就断掉了,如果直接在第一句后面直接加
                // .nextAll().text(wjx_none),作用的就是前面所有的兄弟结点了,下面这种方法就可以解决;
                //end()方法就是结束当前链式编程回到最初结点$(this)
                $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
            }).click(function () {
                //记录用户点击的哪个五角星,给该五角星添加一个样式类
                $(this).addClass("clicked").siblings().removeClass();

            }).mouseleave(function () {
                //判断离开的时候是否点击,如果没有点击,全部星星也为空心,如果点击了才会产生点击的效果
                $(".comment li").text(wjx_none);
          //上一句涉及了隐式迭代,给所有的li标签都添加了文本,它返回的是一个数组,js若要实现这个效果就得实现循环遍历
          //如果是$(".comment li").text()默认返回第一个元素的值
                $(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
            })
        })
    </script>
</head>
<body>
<div>
    <ul class="comment">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

仿淘宝五角星案例:

效果:

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 120px;
            height: 20px;
            margin: 300px auto;
            border: 1px solid red;
            padding: 10px;
        }
        img{
            display: inline-block;
            cursor: pointer;
        }
    </style>
    <script>
       $(function () {
           $(".comment img").mouseenter(function () {
               if($(this).index()<=1){
                   $(this).attr("src","star3.png").prevAll().attr("src","star3.png").end().nextAll().attr("src","star1.png");
               }else{
                   $(this).attr("src","star2.png").prevAll().attr("src","star2.png").end().nextAll().attr("src","star1.png");
               }
           }).click(function () {
               $(this).addClass("clicked").siblings().removeClass();
               $(".clicked").prevAll().attr("src",$(this).attr("src")).end().nextAll().attr("src","star1.png");
           }).mouseleave(function () {
                //判断一个标签类是否含有某个class:
               //1.使用$(‘div‘).is(‘.redColor‘)方法
               //2.使用$(‘div‘).hasClass(‘redColor‘)方法  (注意jquery的低版本可能是hasClass(‘.classname’))
               if($(".comment img").hasClass("clicked")){
                    $("img.clicked").prevAll().attr("src",$("img.clicked").attr("src")).end().nextAll().attr("src","star1.png");
                }else{
                    $(".comment img").attr("src","star1.png");
                }
           })

       })
    </script>
</head>
<body>
<div>
    <span class="comment">
        <img src="star1.png" alt=""/>
        <img src="star1.png" alt=""/>
        <img src="star1.png" alt=""/>
        <img src="star1.png" alt=""/>
        <img src="star1.png" alt=""/>
    </span>
</div>
</body>
</html>

star1:技术分享图片  star2:技术分享图片  star3:技术分享图片

以上是关于22.仿淘宝五角星评论(链式编程隐式迭代)的主要内容,如果未能解决你的问题,请参考以下文章

JQuery的链式编程,隐式迭代是什么意思

jQuery的链式编程和隐式迭代

jQuery——链式编程与隐式迭代

ECSHOP仿淘宝商品评论现金奖励功能

jQuery之链式编程

jQuery对象的链式操作用法分析