微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery实现类似淘宝星星评分功能有截图

html

rush:xhtml;">
  • score">

    id="p"显示即时分数

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

    javascript“

    rush:xhtml;"> $(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("★")
    //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
    $(this).unbind().prevAll().unbind().nextAll().unbind();
    });
    })

    出现的效果是这样的:

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

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

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

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐