评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变...

评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变

思路：在阿里巴巴矢量图中下载需要用的五角星，这样点击的时候，改变它的color,同时获取到它前面的所有五角星改变它的color,获取它所有后面的五角星让他们的color变成原来的颜色。对了最好不要用空心的五角星，因为改变color的时候只会改变它外面有色的部分。这是我写的时候遇到的坑，已经踩过一次了。比较聪明的小伙伴应该已经有思路了，还没看太懂的，可以看下面详细demo

首先引入css和js

<link rel="stylesheet" href="css/iconfont.css" />
<script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script>

　下面是html，写在了一个ul之中：

<ul class="stars clearfix"><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li></ul>

li用了浮动所以clearfixs是用来清楚浮动的，当然也可以不用li可以把所有的i标签写在一行，感觉还比较方便。。

<i class="iconfont icon-star_full"></i>这段是阿里巴巴矢量图中的其中一种写法，个人比较青睐阿里巴巴矢量图，这种方式的图片就相当于是文字，可以通过css改变它的颜色，同理js也可以改变它的颜色，如果有不知道但是想了解的，可以给我发私信。那么下面就是css啦：

li{text-decoration: none;list-style-type:none;float: left;}
.clearfix{content: " ";display: block;height: 0;line-height: 0;overflow: hidden;clear: both;}

其实下面的js也很简单：（写完之后发现的）

<script type="text/javascript">$(function(){$(".icon-star_full").click(function(){//点击五角星的时候$(this).css("color","#ff0000").parent().prevAll().find(".icon-star_full").css("color","#ff0000");//让点击它的元素先改变颜色，再找到它前面的所有父元素下面的五角星的class名，同时改变它的颜色$(this).parent().nextAll().find(".icon-star_full").css("color","#000000");//这段就是找到当前元素后面的所有父元素下面的五角星的class名，将他们变为原来的颜色})})
</script>

ok！！完美运行,没写的时候觉得很难，写了之后发现没想象中的难。

那么完整的demo写下面吧，就当存档了，下次自己在遇到还能再看看

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" href="css/iconfont.css" /><title>评价订单中的小星星，点击之后前面所有的小星星颜色变红，后面的所有星星颜色不变</title><script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script><style type="text/css">li{text-decoration: none;list-style-type:none;float: left;}.clearfix{content: " ";display: block;height: 0;line-height: 0;overflow: hidden;clear: both;}</style></head><body><ul class="stars clearfix"><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li><li><i class="iconfont icon-star_full"></i></li></ul><script type="text/javascript">$(function(){$(".stars li i").click(function(){console.log($(".stars li i"))$(this).css("color","#ff0000").parent().prevAll().find(".icon-star_full").css("color","#ff0000");$(this).parent().nextAll().find(".icon-star_full").css("color","#000000");})})</script></body>
</html>

转载于:https://www.cnblogs.com/floweres/p/9089021.html

评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变...相关推荐

table表格中某条数据不符合条件该条数据背景颜色变灰的写法
业务背景:点击table表中的某条数据,调用接口,判断缴费截止日期是否在今天之后,在今天之前的,给出提示,并且该条数据的背景颜色便会该项目所用到的是vue+element 1.首先在table的表头 ...
美多商城之支付(评价订单商品)
评价订单商品提示: 点击<我的订单>页面中的<待评价>按钮,进入到订单商品评价页面. 一.评价订单商品 1. 展示商品评价页面 1.请求方式选项方案请求方法 GET 请 ...
UE4射击游戏中添加瞄准到敌人时准星变红的效果
主要思路是,建立一个接口Unreal Interface,对需要检测的敌人添加这个接口,当射线检测Result对象继承了该接口时,就让HUD中的准星颜色变红. 首先新建一个Unreal Interfa ...
SAP-PP 生产订单中组件发货库存地点如何确定
生产订单中组件的库存地点是如何确定的,可以直接搜(类似 storage location determination in production order ),SAP官网有Note2988541~ ...
SAP VC销售订单中可配置物料的使用
Part I:物料变式(Material Variants) 在许多行业,对于可配置物料,我们常常会遇到许多来自客户方的定制(配置)需求.如下图就是一个很典型的可配置物料. 对于此类物料,企业并不是先 ...
SAP SD基础知识之订单中装运相关的功能 II
SAP SD基础知识之订单中装运相关的功能 II 一,计划Scheduling 当业务人员创建一张订单时,系统能够决定基于客户要求的delivery date的物料可用日期:需要交货的货物必须在该时点 ...
SAP SD基础知识之订单中装运相关的功能 I
SAP SD基础知识之订单中装运相关的功能 I 一,装运点决定Shipping Point Determination 每个订单行项目都会决定一个shipping point:系统会自动带出一个shi ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
php购物车生成订单,php – 在购物车,结帐和查看订单中设置产品自定义字段和显示值...
更新 – 更正了拼写错误:代码末尾的$product_id变量名称 First: "Duplicating this custom field with key and value, in ...

评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变...

评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变...相关推荐

最新文章

热门文章