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

贴码。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. zookeeper.out: Permission denied错误解决方法

    [hadoop@node1 root]$ zkServer.sh start JMX enabled by default Using config: /opt/software/zookeeper- ...

  2. 基本算法思想之穷举法（C++语言描述）

    穷举算法(Exhaustive Attack method)是最简单的一种算法,其依赖于计算机的强大计算能力来穷尽每一种可能性,从而达到求解问题的目的.穷举算法效率不高,但是适应于一些没有规律可循的场 ...

  3. hdu1064

    #include <iostream>#include<iomanip>using namespace std; int main(){ float total_sum=0.0 ...

  4. js注册

    ScriptManager.RegisterStartupScript(this, GetType(), "", "alert('修改失败!')", true) ...

  5. C++开源库(一) ----log4cpp详解

    我们在写程序的时候通常会希望将一些信息记录下来,方便我们进行日后的一些信息跟踪,错误排查等等.比如:我们在进行数据库操作的时候,我们通常希望知道现在是程序的哪一部分进行了数据库的操作,所以我们会记录下 ...

  6. EIP权限工作流平台总结-2前端框架

      1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com ...

  7. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU特性介绍（2）- RT685EVKA性能实测(Dhrystone)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的性能. 在前面的文章 i.MXRTxxx微控制器概览 里,痞子衡给大家简介过恩智浦半导体在2018 ...

  8. Mybatis中文模糊查询，数据库中有数据，但无结果匹配

    1.Mybatis中文模糊查询,数据库中有数据,但无结果匹配 1.1 问题描述: Mybatis采用中文关键字进行模糊查询,sql语句配置无误,数据库有该数据,且无任何报错信息,但无查询结果 1.2 ...

  9. 洛谷P1349 广义斐波那契数列

    传送门 话说谁能告诉我矩阵怎么用latex表示…… 差不多就这样 //minamoto #include<iostream> #include<cstdio> #include ...

  10. Fiddler 基础教程详解

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...