评価注文の中の五角星、クリックした后に前のすべての五角星の色は赤くなって、后のすべての星の色は変わらない...

15729 ワード

javascript

注文の中の五角星を評価して、クリックした後に前のすべての五角星の色は赤くなって、後のすべての星の色は変わらない
構想:アリババのベクトル図の中で使う五角星をダウンロードして、このようにクリックする時、その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ラベルを1行に書くこともでき、便利な感じがします.

                  ，             ，              ，    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も簡単です:(書き終わってから見つけた)

<span style="color:#000000;">
    $(</span><span style="color:#0000ff;">function</span><span style="color:#000000;">(){
        $(</span>".icon-star_full").click(<span style="color:#0000ff;">function</span><span style="color:#000000;">(){//        </span><span style="color:#000000;">
            $(</span><span style="color:#0000ff;">this</span>).css("color","#ff0000").parent().prevAll().find(".icon-star_full").css("color","#ff0000"<span style="color:#000000;">);//            ，                   class ，        
            $(</span><span style="color:#0000ff;">this</span>).parent().nextAll().find(".icon-star_full").css("color","#000000"<span style="color:#000000;">);//                         class ，          
            })
      })
</span>

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

ノードでColorsDBクエリ継続トークンを取得します.js

第6章対象とデータ構造