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

贴码。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. SQL中top使用方法

    转自:https://www.cnblogs.com/wang7/archive/2012/07/09/2582891.html 1. 在编写程序中,我们可能遇到诸如查询最热门的5篇文章或返回满足条件 ...

  2. Linux查看并修改mysql的编码

    系统:阿里云 一.查看mysql字符集 输入:show variables like 'character_set_%'; 二.修改某一个数据库的编码 输入:alter database dbname ...

  3. 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用

    1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...

  4. OpenGL 使用GLFW创建全屏窗口

    OpenGL 使用GLFW创建全屏窗口 GLFW库里面的glfwCreateWindow()函数是用来创建窗口的函数. 这样函数的原型是: GLFWwindow* glfwCreateWindow(i ...

  5. 12、多空格&多制表符文本之cut域分割终极方案

    解决方法分为如下三步: (1)        使用“tr”命令将制表符转换为空格: (2)        使用“tr”命令将多个重复空格删除,保留一个空格: (3)        使用“cut”命令进 ...

  6. qboimathtest1 t2 配对

    题目 有1~n一共n个数,n为偶数.小Q要把这n个数随机地两两配对.令每一对的权值为它们两个数的和.小Q想要知道这n/2对里最大的权值的期望是多少.请输出答案对10^9+7取模的值. [输入] 一行一 ...

  7. 1.如何绕过WAF（Web应用防火墙）

    一:大小写转换法: 看字面就知道是什么意思了,就是把大写的小写,小写的大写.比如: SQL:sEleCt vERsIoN(); ‍‍XSS:)</script> 出现原因:在waf里,使用 ...

  8. 理解setTimeout和setInterval

    setTimeout和setInterval,这两个js函数都是用来定时执行.setTimeout执行一次,setInterval执行多次. 问题出现在今天,使用setInterval是,设置执行速度 ...

  9. [转]成为优秀Java程序员的10大技巧

    转自:http://www.codeceo.com/article/10-good-java-programmer-tips.html Java程序员有许多应遵循的守则或最佳实践方式.本文概述了每个开 ...

  10. Unity3d 控制物体移动、旋转、缩放

    在Unity中通过利用 Input Manager(输入管理器)可以很简单的实现对一个物体进行移动.旋转.缩放操作. 演示代码: //通过虚拟轴控制物体移动.旋转.缩放 public class Mo ...