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

Posted 2021-01-10 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的链式编程，隐式迭代是什么意思