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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
jQuery插件实现图片轮播效果
Oct 19 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python实现四人制扑克牌游戏
2020/04/22 Python
医院总经理岗位职责
2014/02/04 职场文书
学雷锋宣传标语
2014/06/25 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
个人总结与自我评价
2015/02/14 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP