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>

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

  • 相关阅读:
    IO复习
    递归
    转换流
    编码与解码
    打印流(printStream)
    Properties
    【转】将Visual Studio武装到底
    【转】VS2008中的自定义格式化代码
    C++开发工具的常用插件
    抽烟的注意事项
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/11037551.html
Copyright © 2011-2022 走看看