jQuery实现条件搜索查询、实时取值及升降序排序的方法分析


Posted in jQuery onMay 04, 2019

本文实例讲述了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 内容的升降序排列需求)

排序方式分为三种状态:

1. 默认灰色未选中
2. 点击默认降序  .desc
3. 再点击升序  .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 name
var sortLastString = sortLast.substring(11); // substring(11) 截取从11到最后的字符串 == desc / desc asc
var dataValue = sortArr[sortIndex].concat(sortLastString); // .concat() 生成新的字符串

dataValue  就是排序方式的值

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
详解jquery和vue对比
Apr 16 #jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解JQuery基础动画操作
Apr 12 #jQuery
详解jQuery设置内容和属性
Apr 11 #jQuery
You might like
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
一个SQL面试题
2014/08/21 面试题
党员公开承诺事项
2014/03/25 职场文书
财产公证书格式
2014/04/10 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
优秀团员事迹材料
2014/12/25 职场文书
文案策划岗位职责
2015/02/11 职场文书
追讨欠款律师函
2015/05/27 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL