$(".list-txt ul").find("li").click(function(){
    if($(this).index()==0){
        if($(this).hasClass("start")){
            $(this).parents("ul").find("li").eq(1).removeClass("start");
            $(this).parents("ul").find("li").eq(2).removeClass("start");
            $(this).parents("ul").find("li").eq(3).removeClass("start");
            $(this).parents("ul").find("li").eq(4).removeClass("start");
        }else{
            $(this).addClass("start");
        }
    };
    
    if($(this).index()==1){
        if($(this).hasClass("start")){    
            $(this).parents("ul").find("li").eq(2).removeClass("start");
            $(this).parents("ul").find("li").eq(3).removeClass("start");
            $(this).parents("ul").find("li").eq(4).removeClass("start");
        }else{
            $(this).addClass("start");
            $(this).parents("ul").find("li").eq(0).addClass("start");
        }
    };
    if($(this).index()==2){
        if($(this).hasClass("start")){        
            $(this).parents("ul").find("li").eq(3).removeClass("start");
            $(this).parents("ul").find("li").eq(4).removeClass("start");
        }else{
            $(this).addClass("start");
            $(this).parents("ul").find("li").eq(0).addClass("start");
            $(this).parents("ul").find("li").eq(1).addClass("start");
        }
    };
    if($(this).index()==3){
        if($(this).hasClass("start")){        
            $(this).parents("ul").find("li").eq(4).removeClass("start");
        }else{
            $(this).addClass("start");
            $(this).parents("ul").find("li").eq(0).addClass("start");
            $(this).parents("ul").find("li").eq(1).addClass("start");
            $(this).parents("ul").find("li").eq(2).addClass("start");
        }
    };
    if($(this).index()==4){
        if($(this).hasClass("start")){            
        }else{
            $(this).addClass("start");
            $(this).parents("ul").find("li").eq(0).addClass("start");
            $(this).parents("ul").find("li").eq(1).addClass("start");
            $(this).parents("ul").find("li").eq(2).addClass("start");
            $(this).parents("ul").find("li").eq(3).addClass("start");
        }
    };
    var num=$(this).parents("ul").find(".start").length;
    $(this).parents(".list-txt").find("input").val(num)
})

JQ五星好评效果的更多相关文章

  1. 如何用jQuery实现五星好评

    jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...

  2. jQuery实现简单的五星好评

    最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...

  3. 亲,麻烦给个五星好评!—RatingBar

    引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...

  4. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  5. js五星好评

    一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...

  6. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  7. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

  8. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 在用jQuery时遇到的小问题

    1. class类名问题? 在我在class ='看看(2)' ,凡是这样的居然给自身加其他style样式,居然添加不上,后来改成其他类名不带括号里的,居然好了. 2. line-height 引入的 ...

  2. 云计算 --> 技术原理

    云计算技术原理 云计算分为IaaS.PaaS和SaaS三种类型,不同的厂家又提供了不同的解决方案,目前还没有一个统一的技术体系结构,下图是一个供商榷的云计算体系结构如下,它概括了不同解决方案的主要特征 ...

  3. ava集合---LinkedList源码解析

    一.源码解析 public class LinkedList<E> extends AbstractSequentialList<E> implements List<E ...

  4. 将 Shiro 作为应用的权限基础 四:shiro的配置说明

    Apache Shiro的配置主要分为四部分: SecurityManager的配置 URL过滤器的配置 静态用户配置 静态角色配置 其中,由于用户.角色一般由后台进行操作的动态数据,比如通过@Req ...

  5. Java 并发编程实践基础 读书笔记: 第一章 JAVA并发编程实践基础

    1.创建线程的方式: /** * StudySjms * <p> * Created by haozb on 2018/2/28. */ public class ThreadDemo e ...

  6. 自动化制作.framework

    1.生成.framework前的配置工作详见:http://www.cnblogs.com/huangzs/p/8029258.html 2. 将以下脚本粘贴进去,修改FMK_NAME. p.p1 { ...

  7. [BZOJ 3813]奇数国

    3813: 奇数国 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 736  Solved: 416[Submit][Status][Discuss] ...

  8. 201621123062《java程序设计》第12周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 思维导图: 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2. ...

  9. 网页设计入门<一>

    俗话说:技多不压身.实习周,网页设计是之一,边学边总结... 本次网页设计基于Adobe Dreamweaver CS6开发平台,根据实习老师的暴力指导,为什么说暴力呢? 没有基础,没有预告,打开软件 ...

  10. Flask 扩展 缓存

    如果同一个请求会被多次调用,每次调用都会消耗很多资源,并且每次返回的内容都相同,就该使用缓存了 自定义缓存装饰器 在使用Flask-Cache扩展实现缓存功能之前,我们先来自己写个视图缓存装饰器,方便 ...