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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现鼠标拖动图片功能
Mar 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
长波有什么东西
2021/03/01 无线电
yii添删改查实例
2015/11/16 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
Element input树型下拉框的实现代码
2018/12/21 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
django框架auth模块用法实例详解
2019/12/10 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
食品安全承诺书范文
2014/08/29 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
三好学生个人总结
2015/02/15 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
工商局调档介绍信
2015/10/22 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书