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:

转载于:https://www.cnblogs.com/alex-xxc/p/9738815.html

22.仿淘宝五角星评论（链式编程、隐式迭代）相关推荐

MySQL仿淘宝页面评论评分统计SQL
假设淘宝有一张商品评论表,存储在MySQL中.表设计如下: ID为productlist_comment主键, UserID为用户的ID, ProductID为商品ID Content为评论的内容, ...
【vue】仿淘宝商品详情---实现滚动显隐标签页锚点导航
先看图利用css的opacity实现了在滚动时对导航栏透明度的改变,达到导航栏滚动显隐效果说明封装成组件复用的话,首先快捷键的每一项数据需要父组件传入:在父组件定义一个数组作为右侧导航栏的数据: ...
silverlight 自定义控件基础篇（仿淘宝评论星级控件）
首先说说今天的控件能干什么? 1,仿淘宝的评论星级控件,鼠标滑过星星,会变亮. 2,可以用来,展示某一类对象的状态,或者统计信息,比如说,某一类对象,有1~10不同的状态,10为满状态,那么该控件就能 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧需要做一 ...
HTML5期末大作业：电商网站设计——仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript
HTML5期末大作业:电商网站设计--仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...

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

22.仿淘宝五角星评论（链式编程、隐式迭代）相关推荐

最新文章

热门文章