通用商品/商家星星评价HTML-支持webapp使用

来源：互联网发布：c语言与或运算编辑：程序博客网时间：2024/05/04 10:34

代码使用备注：

1. jquery-1.8.3.min.js（自备）

2.star_empty.png为空星星 star_full.png为亮星星（自备）

3.div的样式可以自己调整（自备）

4.添加初始化代码，可支持多个评论项，eg：口味、环境、物流、服务等

$(function(){
initEvent('mydiv1');
initEvent('mydiv2');
});

<!doctype html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    <meta http-equiv="content-script-type"content="text/javascript">    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <title></title>    <script type="text/javascript">        var isclick = false;        function change(mydivid,num) {            if (!isclick) {                var tds = $("#"+mydivid+" ul li");                for (var i = 0; i < num; i++) {                    var td = tds[i];                    $(td).find("img").attr("src","images\/star_full.png");                }                var tindex = $("#"+mydivid).attr("currentIndex");                tindex = tindex==0?0:tindex+1;                for (var j = num; j < tindex; j++) {                    var td = tds[j];                    $(td).find("img").attr("src","images\/star_empty.png");                }                $("#"+mydivid).attr("currentIndex",num);            }        }        function repeal(mydivid,num) {            if (!isclick) {                var tds = $("#"+mydivid+" ul li");                var tindex = $("#"+mydivid).attr("currentIndex");                tindex = tindex==0?0:tindex+1;                for (var i = tindex; i < num; i++) {                    var td = tds[i];                    $(td).find("img").attr("src","images\/star_empty.png");                }                $("#"+mydivid).attr("currentIndex",num);            }        }        function change1(mydivid,num) {            if (!isclick) {                change(mydivid,num);            }            else {                alert("Sorry,You had clicked me!");            }        }        $(function(){            initEvent('mydiv1');            initEvent('mydiv2');        });        function initEvent(mydivid) {            //var tableWjx =$("#tableWjx ul li");            // var items= tableWjx.getElementsByTagName("ul");            var tds = $("#"+mydivid+" ul li");            for (var i = 0; i < tds.length; i++) {                var td = tds[i];                $(td).live('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});                //$(td).live('mouseout',function(){var num = $(this).attr("num");repeal(mydivid,num);});                $(td).live('click',function(){var num = $(this).attr("num");change1(mydivid,num);});            }        }    </script>    <style type="text/css">        ul{           list-style-type: none;        }        .star_ul li{            float:left;        }    </style></head><body><div id="mydiv1" currentIndex="0"><ul class="star_ul"><li num="1"><img src="images/star_empty.png" class="xing_hui"/></li><li num="2"><img src="images/star_empty.png"  class="xing_hui"/></li><li num="3"><img src="images/star_empty.png"  class="xing_hui"/></li><li num="4"><img src="images/star_empty.png"  class="xing_hui"/></li><li num="5"><img src="images/star_empty.png"  class="xing_hui"/></li></ul></div><div id="mydiv2" currentIndex="0"><ul class="star_ul"><li num="1"><img src="images/star_empty.png"/></li><li num="2"><img src="images/star_empty.png"/></li><li num="3"><img src="images/star_empty.png"/></li><li num="4"><img src="images/star_empty.png"/></li><li num="5"><img src="images/star_empty.png"/></li></ul></div></body></html>

0 0