JQ五星好评效果
$(".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五星好评效果的更多相关文章
- 如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...
- jQuery实现简单的五星好评
最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...
- 亲,麻烦给个五星好评!—RatingBar
引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
- JQ实现弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...
- js五星好评
一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...
- 修改css样式+jq中的效果+属性操作+元素操作
:checked 选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color '); //300px 2.参数是属性名,属性值,逗号分隔,是 ...
- 五星评分效果 原生js
五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...
- 今天讲的是JQ 的动画效果
老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- jq菜单折叠效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 在用jQuery时遇到的小问题
1. class类名问题? 在我在class ='看看(2)' ,凡是这样的居然给自身加其他style样式,居然添加不上,后来改成其他类名不带括号里的,居然好了. 2. line-height 引入的 ...
- 云计算 --> 技术原理
云计算技术原理 云计算分为IaaS.PaaS和SaaS三种类型,不同的厂家又提供了不同的解决方案,目前还没有一个统一的技术体系结构,下图是一个供商榷的云计算体系结构如下,它概括了不同解决方案的主要特征 ...
- ava集合---LinkedList源码解析
一.源码解析 public class LinkedList<E> extends AbstractSequentialList<E> implements List<E ...
- 将 Shiro 作为应用的权限基础 四:shiro的配置说明
Apache Shiro的配置主要分为四部分: SecurityManager的配置 URL过滤器的配置 静态用户配置 静态角色配置 其中,由于用户.角色一般由后台进行操作的动态数据,比如通过@Req ...
- Java 并发编程实践基础 读书笔记: 第一章 JAVA并发编程实践基础
1.创建线程的方式: /** * StudySjms * <p> * Created by haozb on 2018/2/28. */ public class ThreadDemo e ...
- 自动化制作.framework
1.生成.framework前的配置工作详见:http://www.cnblogs.com/huangzs/p/8029258.html 2. 将以下脚本粘贴进去,修改FMK_NAME. p.p1 { ...
- [BZOJ 3813]奇数国
3813: 奇数国 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 736 Solved: 416[Submit][Status][Discuss] ...
- 201621123062《java程序设计》第12周作业总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 思维导图: 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2. ...
- 网页设计入门<一>
俗话说:技多不压身.实习周,网页设计是之一,边学边总结... 本次网页设计基于Adobe Dreamweaver CS6开发平台,根据实习老师的暴力指导,为什么说暴力呢? 没有基础,没有预告,打开软件 ...
- Flask 扩展 缓存
如果同一个请求会被多次调用,每次调用都会消耗很多资源,并且每次返回的内容都相同,就该使用缓存了 自定义缓存装饰器 在使用Flask-Cache扩展实现缓存功能之前,我们先来自己写个视图缓存装饰器,方便 ...