jQuery 条件搜索查询 实时取值 升降序排序
一。鼠标点击获取搜索条件中的被选中的值
创建方法 getAttrValue() 方法,每次的 .click 都要调用 function getAttrValue(){}
例如,把选中的值给到属性 data-value 。只需要每次点击,获取 li.active 的子集 a 的 .attr("data-value")即可
eg: var pubTime = $(getArr[0]).find("li.active").children().attr("data-value");
pubTime 就是第一个搜索项的值
二。排序方式的状态(主要应用于table 内容的升降序排列需求)
排序方式分为三种状态:
- 默认灰色未选中
- 点击默认降序 .desc
- 再点击升序 .asc
CSS :
- .search-sort li a, .search-sort li a.asc, .search-sort li a.desc { background-image : sort.png }--灰色图标
- .search-sort li.active a.desc { background-image: desc.png }--向下的蓝色图标
- .search-sort li.active a.asc { background-image: asc.png !important; }--向上的蓝色图标
JS :默认第一个排序降序被选中。切换排序方式,默认展示降序。排序方式互斥
// 第一行: li a.asc--展示灰色图标
// 第二行: 第一次点击 li 时, li.active a.desc,展示向下的蓝色图标,并且清除 siblings .active ;同时,其他的排序方式默认 asc ;
// getAttrValue()---每次选中就走一次输出
$(".search-sort li a").addClass("asc");$(".search-sort li").each(function(){ $(this).click(function(){ $(this).addClass("active"); $(this).children("a").addClass("desc").toggleClass("asc"); $(this).siblings().removeClass("active"); $(this).siblings().children().removeClass("desc").addClass("asc"); getAttrValue(); })});
// 默认第一个时间降序被选中$($(".search-sort").children()[0]).addClass("active")$($(".search-sort").children()[0]).children().addClass("desc").removeClass("asc");
三。获取排序方式的值
li.active a[class=" desc / asc "]
/** sortArr // 排序方式 给出一个数组* 根据 index 脚标找 sortArr 对应的值* */var sortArr = ["sortTime","sortTotalComment","sortIncreaseComment"]; //三种排序方式var sortIndex = $(getArr[getLen-1]).find("li.active").index(); // 当前那个按钮被选中,返回脚标var sortLast = $(getArr[getLen-1]).find("li.active").children().attr("class"); //返回被选中按钮的 class namevar sortLastString = sortLast.substring(11); // substring(11) 截取从11到最后的字符串 == desc / desc ascvar dataValue = sortArr[sortIndex].concat(sortLastString); // .concat() 生成新的字符串 dataValue 就是排序方式的值
jQuery 条件搜索查询 实时取值 升降序排序的更多相关文章
- jQuery对html元素的取值与赋值实例详解
jQuery对html元素的取值与赋值实例详解 转载 2015-12-18 作者:欢欢 我要评论 这篇文章主要介绍了jQuery对html元素的取值与赋值,较为详细的分析了jQuery针对常 ...
- 浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...
- CodeIgniter框架多条件搜索查询分页功能解决方案
最近在用ci框架写功能的时候,需要用到分页功能,本来寻常的数据结果分页是比较简单的,但是这次写的功能是多条件搜索查询分页,就有点难度了,看官方手册下面评论好多人问, 正常的分页功能例子是这样的: $t ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- jQuery对表单元素的取值和赋值操作代码
使用常规的思路:$(“#keyword”).value 取值是取不到的,因为此时$(‘#keydord’)已经不是个element,而是个jquery对象,所以应该使用:$(“#keyword”).v ...
- jQuery对表单元素的取值和赋值操作代码(转)
使用常规的思路:$("#keyword").value 取值是取不到的,因为此时$('#keydord')已经不是个element,而是个jquery对象,所以应该使用:$(&qu ...
- ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空
原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...
- jquery操作select(选中,取值)
最近工作中总出现select 和 option问题,整理一下,内容大部分源于网络资料 一.基础取值问题 例如<select class="selector"></ ...
- Jquery 关于span标签的取值赋值用法
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...
随机推荐
- ngnix简单使用
NGINX是一个高性能HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,是由伊戈尔·塞索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的,第一个公版发布于2004年10月4日 ...
- Java关于日期的计算持续汇总~
/** * 00 * 描述:传入Date date.转为 String yyyyMMdd. * [时间 2019-04-18 15:41:12 作者 陶攀峰] */ public static Str ...
- C语言货架01
教材: < C程序设计(第四版) > 谭浩强著 清华大学出版社 教材目录 第1章 程序设计和C语言 第2章 算法——程序的灵魂 第3章 最简单的C程序设计— ...
- C# 直接引用js文件,调js里的数据
C# 直接引用js文件,调js里的数据 引入命名空间 using System.IO; string path = AppDomain.CurrentDomain.BaseDirectory + &q ...
- 周一04.2流程控制if……else
语法一: if 条件1: 代码1 代码2 例题:如果年龄>20岁,那么:叫阿姨 age=22if age>20: print('阿姨') 语法二: if 条件1: 代码1 代码2else ...
- 转自阿里云邪-如何从小白成长为 Apache Committer?
http://wuchong.me/blog/2019/02/12/how-to-become-apache-committer/ 过去三年,我一直在为 Apache Flink 开源项目贡献,也在两 ...
- mybatis批量插入报错
报错内容 org.springframework.jdbc.UncategorizedSQLException: ### Error updating database. Cause: java.sq ...
- pip "Cannot uninstall 'six'. It is a distutils installed project..." 解决方法
安装 mysql-connector-python 时,由于依赖包 six 之前已经安装过,但是不能自动更新到所需版本.有如下错误提示: pip "Cannot uninstall 'six ...
- “百度杯”CTF比赛 十月场 Hash 复现
进入题后老套路得到两个关键: 1.$hash=md5($sign.$key);the length of $sign is 8 2.key=123&hash=f9109d5f83921a551 ...
- 【alpha阶段】第九次Scrum Meeting
每日任务内容 队员 昨日完成任务 明日要完成的任务 牛宇航 #26 评价总览接口编写https://github.com/rRetr0Git/rateMyCourse/issues/26 #26 评价 ...