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

贴码。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. 03.generator

    generatorConfig.xml自动生成连接数据库的这些个公共类的方法. <?xml version="1.0" encoding="UTF-8" ...

  2. 人工智能: 自动寻路算法实现(三、A*算法)

    博客转载自:https://blog.csdn.net/kwame211/article/details/78139506 本篇文章是机器人自动寻路算法实现的第三章.我们要讨论的是一个在一个M×N的格 ...

  3. R语言：文本（字符串）处理与正则表达式

    R语言:文本(字符串)处理与正则表达式 (2014-03-27 16:40:44) 转载▼ 标签: 教育 分类: R 处理文本是每一种计算机语言都应该具备的功能,但不是每一种语言都侧重于处理文本.R语 ...

  4. 再次总结Linux最常用命令

    cp,,mv,,rm,,rmdir,,mkdir,,more,,touch,,head,,tail,,pwd,, less  按q退出,空格翻页,回车 上下键滚动行 -N  显示行号 -S  行过长时 ...

  5. java的大小端和转换

    一直以为大小端针对的bit的顺序,今天才知道:大小端的分度值是 byte,即每一个byte都是按照正常顺序,但是byte组装成一个int 或者是 long等时每个byte的摆放位置不同. 测试代码: ...

  6. Thinkphp的import使用方法

    Thinkphp的import使用方法主要有以下4种,在此记下以供查询.原文链接:http://www.jb51.net/article/51765.htm     感谢. 1.用法一 import( ...

  7. windows下编译Boost库

    下载源码 boost_1_66_0.7z 生成编译工具 D:\Project\boost_1_66_0> bootstrap.bat 配置Python环境变量(使用VS2017自带的32位pyt ...

  8. CircleCI 与持续集成

    CircleCI 入门 最近在完成老师的作业:使用 CircleCI 进行持续集成,现将过程书写下来,与大家一起学习进步. A. What is CircleCI? 1. 什么是持续集成 持续集成(C ...

  9. Python中使用Type hinting 和 annotations

    Type hints最大的好处就是易于代码维护.当新成员加入,想要贡献代码时,能减少很多时间. 也方便我们在调用汉书时提供了错误的类型传递导致运行时错误的检测. 第一个类型注解示例 我们使用一个简单例 ...

  10. 帝都Day4(1)——还是dp

    其实是day4 一.洛谷P1018 乘积最大 f[i][j]表示前i个数 切成j块 用f[i][j]而不用f[i][j][k](i到j切成k块)呢? Luogu1043 前缀和(好算一段里的数的和)+ ...