使用JQuery写评分控件

最新推荐文章于 2023-06-17 16:35:37 发布

一只极度渴望成长的Giser

最新推荐文章于 2023-06-17 16:35:37 发布

阅读量153

点赞数

分类专栏： Javascript、JQuery练习文章标签：使用JQuery写评分控件

本文链接：https://blog.csdn.net/qq_32077521/article/details/99715540

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <style type="text/css">
        td {
            background-image: url("images/star.JPG");
            background-position: 120px 0;
        }
    </style>
    <table id="table1" width="300" height="60" border="1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <input id="txt1"/>
    <script type="text/javascript">
        $(function () {
            //单元格鼠标悬浮事件
            $("td").mouseover(function () {
                //设置点击单元格之前的
                $(this).prevAll().css({
                    "background-position": "235px 0"
                }).end().css({//设置本身的
                    "background-position": "235px 0"
                });
            }).click(function () {//单击事件
                $(this).attr("isClick", "isClick");
                $(this).siblings().removeAttr("isClick");
                $(this).css({
                    "background-position": "235px 0"
                }).prevAll().css({
                    "background-position": "235px 0"
                }).end().nextAll().css({
                    "background-position": "120px 0"
                });
                $("#txt1").val(($("td").index($(this)) + 1) * 10 + "分！");
                //var objs = $(this).prevAll();//得到单击元素之前的所有元素
                //$.map(objs, function (ele, index) {   //循环遍历之前的元素添加标记属性                
                //    ele.setAttribute("isClick", "isClick");                    
                //});
                //this.setAttribute("isClick", "isClick");//将本身也添加上标记属性
                //var objs2 = $(this).nextAll();//得到单机元素之后的所有元素
                //$.map(objs2, function (ele,index) {//循环遍历之后的所有元素移除标记属性
                //    ele.removeAttribute("isClick");
                //});
                //var $Objs = $("td");//得到所有的元素
                //$.map($Objs, function (ele, index) {//循环遍历所有的元素，判断如果存在标记属性，则设置一种样式，如果不存在标记属性，则设置成另一种样式
                //    if (ele.hasAttribute("isClick")) {
                //        $(ele).css({
                //            "background-position": "235px 0"
                //        });
                //    }
                //    else {
                //        $(ele).css({
                //            "background-position": "120px 0"
                //        });
                //    }
                //});
            }).mouseleave(function () {//鼠标离开事件
                $("td").css({
                    "background-position": "120px 0"
                });
                $("td[isClick=isClick]").css({
                    "background-position": "235px 0"
                }).prevAll().css({
                    "background-position": "235px 0"
                }).end().nextAll().css({
                    "background-position": "120px 0"
                });
                //var $Objs = $("td");//得到当前页面的所有td标签
                //$.map($Objs, function (ele,index) {//循环遍历所有的td标签，判断如果有标记属性，则设置一种样式，如果没有标记属性，则设置成另一种样式
                //    if (ele.hasAttribute("isClick")) {
                //        $(ele).css({
                //            "background-position": "235px 0"
                //        });
                //    }
                //    else {
                //        $(ele).css({
                //            "background-position": "120px 0"
                //        });
                //    }
                //});
            });
        });
    </script>
</body>
</html>

一只极度渴望成长的Giser

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery写评分控件

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> &...
复制链接

扫一扫