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表单设置值的方法
Jun 30 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jquery插件实现悬浮的菜单
Apr 24 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模拟js函数unescape的函数代码
2012/10/20 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
js加解密 脚本解密
2008/02/22 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python制作小说爬虫实录
2017/08/14 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
银行开户授权委托书格式
2014/10/10 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
小学家长意见怎么写
2015/06/03 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
JS的深浅复制详细
2021/10/16 Javascript
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS