zoukankan      html  css  js  c++  java
  • jquery 五星评价(图片实现)

    1111

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>五星评价(图片实现) </title>
        <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
    <body>
        <div class="starMain" style=" 100%;margin: 0 auto;height: 10px;line-height:10px;margin-top: 1px;">
            <img class="ev-star" src="/Script/image/evaluate/empty.png" />
            <img class="ev-star" src="/Script/image/evaluate/empty.png" />
            <img class="ev-star" src="/Script/image/evaluate/empty.png" />
            <img class="ev-star" src="/Script/image/evaluate/empty.png" />
            <img class="ev-star" src="/Script/image/evaluate/empty.png" />
        </div>
        <br/> <br />
        <input class="preData starResult" type="text" />
    
        <script>
            $(function () {
                $(".starMain").each(function () {
                    starFun($(this));
                })
            });
            function starFun(element) {
                var imgs = element.find(".ev-star");
                var len = imgs.length;
                for (var i = 0; i < len; i++) {
                    imgs[i].index = i;
                    imgs[i].onclick = function () {
                        var count = 0;
                        for (var j = 0; j <= this.index; j++) {
                            imgs[j].src = "/Script/image/evaluate/full.png";
                            count++;
                        }
                        for (var h = (this.index + 1); h < len; h++) {
                            imgs[h].src = "/Script/image/evaluate/empty.png";
                        }
                        var starResult = $(this).parent().parent().find(".starResult");
                        starResult.val(count);
                    }
                }
            }
        </script>
    </body>
    </html>

     五角星:实心五角星空心五角星

  • 相关阅读:
    linux 中安装 maven
    linux中如何安装jdk
    MySQL中的语法怎么执行的
    接口自动化--使用正则管理数据
    数学
    Java 并发--- 线程间协作的两种方式:wait、notify、notifyAll和Condition
    Java 并发--- Callable、Future和FutureTask
    Java 并发--- 线程池
    Java 并发--- 阻塞队列
    Java 并发---ConcurrentHashMap
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/11037551.html
Copyright © 2011-2022 走看看