zoukankan      html  css  js  c++  java
  • jquery星级评分特效

    写在开头:

      以前总是嘴上说好好学习jquery,但一直都没有付出行动,还一直给自己找各种理由。最近真的很想学好jquery,因为我家那位一直以来的鼓励,我决定好好努力,好好加油。目前水平有限(菜鸟),还请大家多多包含。

    案例:

    最终效果:

    1.首先是html局部,整体为一个大的div,主要包含span、ul、p标签:

    2.css样式结构

    3.jquery代码

    通过这个案例,写一下自己的学习笔记,刚开始的时候不知道怎么判断当前选中的是第几颗星星,通过宝贝讲解的实例(小刘家有3个儿子,有个大妈见了小刘就问:小刘你在家排行第几啊?假如小刘排行老二,那他肯定回答是老二),自己才能清楚的明白$(this).index(),得到的是当前li的索引值,而索引值是从0开始计数的,所以命名了currentIndex的值为$(this).index()+1,当鼠标移到某颗星上的时候,这颗星以及前边的星都要亮起来。这里的each()方法,是为了遍历ul中的所有li,如果$(this).index()<currentIndex的时候,则变亮。

    写这个案列时对自己来说比较难的地方:1.不知道索引的使用  2.each()的遍历不知道 3.不知道怎么判断当前选中是第几颗星,并且怎么让当前选中以及之前的星亮起来。

    ps:谢谢我家那位一直给自己耐心讲解,谢谢宝贝。

  • 相关阅读:
    猫与路由器(还没看)
    ORA-12154: TNS: 无法解析指定的连接标识符(未解决)
    easy-batch demo
    mongodb 创建用户
    docker mongodb
    监听器,过滤器,拦截器
    mysql docker-compose启动异常:Database is uninitialized and password option is not specified
    设计模式-builder模式的价值
    【C++ Template | 04】折叠表达式
    【vim】vim插件教程
  • 原文地址:https://www.cnblogs.com/7-11/p/4153933.html
Copyright © 2011-2022 走看看