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

最新推荐文章于 2024-08-13 23:52:07 发布

风一样的执着

最新推荐文章于 2024-08-13 23:52:07 发布

阅读量3k

点赞数

分类专栏： HTML/HTML5/CSS/JS 文章标签： html5 css javascript web app 评论

本文链接：https://blog.csdn.net/alan294902466/article/details/49924575

版权

HTML/HTML5/CSS/JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码使用备注：

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>