jQuery如何实现条件搜索查询、实时取值及升降序排序
这篇文章主要介绍jQuery如何实现条件搜索查询、实时取值及升降序排序,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,网站设计制作、网站设计,塑造企业网络形象打造互联网企业效应。
本文实例讲述了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是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
以上是“jQuery如何实现条件搜索查询、实时取值及升降序排序”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享标题:jQuery如何实现条件搜索查询、实时取值及升降序排序
URL链接:http://myzitong.com/article/pggjsg.html