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

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

思路:在阿里巴巴矢量图中下载需要用的五角星,这样点击的时候,改变它的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标签写在一行,感觉还比较方便。。

这段是阿里巴巴矢量图中的其中一种写法,个人比较青睐阿里巴巴矢量图,这种方式的图片就相当于是文字,可以通过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也很简单:(写完之后发现的)

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

你可能感兴趣的:(javascript)