-   不正之处，欢迎指正。^-^.好绕的话

贴码。html

<body>

    <div id="div">

        <ul>

            <li>☆</li>

            <li>☆</li>

            <li>☆</li>

            <li>☆</li>

            <li>☆</li>

        </ul>

    </div>

    <p id="p"></p>

    <p id="score"></p>

</body>

id="p"显示即时分数

id="score"显示最终分数----------------------------------------------

javascript“

 <script type="text/javascript">

        $(function () {

            //为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件

            $("#div li").bind({

                mouseout:function () {

                    $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")

                },

                mouseover: function () {

                    $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")

                }

            });

            //=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

              $("#div li").mouseover(function () {

                    $("#p").html(parseInt( $(this).index("#div li"))+1);

                });

            //鼠标按下时，确定分数。额，就不更改了，大局已定。

                $("#div li").mousedown(function () {

                    $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));

                    $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")

                    //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除

                    $(this).unbind().prevAll().unbind().nextAll().unbind();

                });

            })

        </script>

出现的效果是这样的：

可惜的是你一点击下去--就不可更改了。真的是很悲伤啊。大概也只是做了一个小样子而已。

prevAll() 和nextAll()这两个方法？暂且说方法吧。在jquery的文档可以查得到。

 index 在jquery 里是返回元素的索引值，从零开始。分数呢就加1,

jquery--实现类似淘宝星星评分功能的更多相关文章

  1. 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

    转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...

  2. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

  3. openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图（类似淘宝方案）

    openresty + lua-resty-weedfs + weedfs + graphicsmagick动态生成缩略图(类似淘宝方案) --大部分的网站都要涉及到图片缩略图的处理,比如新闻配图,电 ...

  4. 写一个类似淘宝的ios app需要用到哪些技术？

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  5. Zencart先生成订单后付款，类似淘宝后台修改订单价格

    Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...

  6. 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记

    前言 网购已经不再是现在的时髦,而变成了我们每天的日常生活.上网已经和买买买紧密地联系在了一起,成为了我们的人生信条.而逛街一词,越来越多地变成了一种情怀.有时候我们去逛街,要么是为了打发时间,要么是 ...

  7. JS仿淘宝星星评价

    //直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...

  8. solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

    首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...

  9. ios 类似淘宝评论星星功能

    创建星星视图: //星星 _myview = [[UIView alloc]initWithFrame:CGRectMake(95, 5, 200, 50)]; UIPanGestureRecogni ...

随机推荐

  1. 问题：OAuth2.0；结果：帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题. 豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒 ...

  2. Sequence Models 笔记（一）

    1 Recurrent Neural Networks(循环神经网络) 1.1 序列数据 输入或输出其中一个或两个是序列构成.例如语音识别,自然语言处理,音乐生成,感觉分类,dna序列,机器翻译,视频 ...

  3. 微信 python搭建服务器

    1. 搭建服务以web.py网络框,python,腾讯云服务器为例介绍. 1)安装/更新需要用到的软件 安装python2.7版本以上 安装web.py pip install web.py sudo ...

  4. Jmeter进行简单mysql数据库测试

    1.环境准备: mysql: mysql-5.7.17.msi jdbc驱动: 自己百度一下即可 Jmeter:  3.2 2.打开Jmeter,创建测试计划,   点击浏览,添加jdbc驱动 3.添 ...

  5. 使用Openssl编译svn并安装

    我的操作系统是CentOS 6.8.公司的svn服务器安装在windows系统中,并且使用 VisualSVN 对外提供https服务. 在centos 6.8上如果我使用yum 安装svn,那么根本 ...

  6. win7 64位安装nokia 920驱动

    折腾了很长时间,终于安装成功,先将一些步骤记下来,此方法适用于哪些网上常规方法无法安装驱动的: 需要注意920不要连到电脑上的USB3.0接口,相关文件下载地址:http://pan.baidu.co ...

  7. 20169201 实验三 敏捷开发与XP实践报告

    敏捷开发与XP介绍 敏捷开发(Agile Development)是一种以人为核心.迭代.循序渐进的开发方法."敏捷流程"是一系列价值观和方法论的集合.从2001年开始,一些软件界 ...

  8. 业务、数据记录——ThreadPool.QueueUserWorkItem及Redis的实现

    业务描述 当用户执行完业务操作,或者数据操作后,讲业务记录/数据追踪插入到Redis中.ThreadPool.QueueUserWorkItem定时检查队列并将上述数据插入到数据库中持久化. 实现流程 ...

  9. js 把字符串变成函数

    js 把字符串变成函数 eval("(" + fieldEventss[1]+")");

  10. C++基础之多态性和动态联编

    (1)多态性是指相同的函数名对应不同的实现.多态性采用两种方式:重载方式和覆盖方式.重载方式表现在函数重载和运算符重载:覆盖方式表现在基类与派生类中相同说明的函数.(2)函数重载要求被重载的函数应该在 ...