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

 更新时间:2019年05月04日 10:34:06   作者:晨蕙曦殷  
这篇文章主要介绍了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页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

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

相关文章

  • jQuery插件imgAreaSelect基础讲解

    jQuery插件imgAreaSelect基础讲解

    关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解,需要的的朋友参考下吧
    2017-05-05
  • 超棒的响应式布局jQuery插件Freetile.js

    超棒的响应式布局jQuery插件Freetile.js

    随着页面扁平化的普及,越来越多的网站都开始使用响应式布局,作为一个优秀的前端工作者,必须要精通的,这里给大家推荐一款响应式布局的jQuery插件。
    2014-11-11
  • jQuery的ajax和遍历数组json实例代码

    jQuery的ajax和遍历数组json实例代码

    下面小编就为大家带来一篇jQuery的ajax和遍历数组json实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 基于jQuery实现美观且实用的倒计时实例代码

    基于jQuery实现美观且实用的倒计时实例代码

    倒计时效果在我们的日常生活中经常会用到,比如说高考倒计时、元旦放假倒计时、春节放假倒计时等等,下面通过本篇文章给大家分享基于jQuery实现美观且实用的倒计时实例代码,对jquery倒计时相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • jQuery中$this和$(this)的区别介绍(一看就懂)

    jQuery中$this和$(this)的区别介绍(一看就懂)

    这篇文章主要介绍了jQuery中$this和$(this)的区别介绍(一看就懂),本文用简洁的语言讲解了它们之间的区别,并给出了一个例子来说明,需要的朋友可以参考下
    2015-07-07
  • 分享五个有用的jquery小技巧

    分享五个有用的jquery小技巧

    作为轻量级的JS库,jQuery随着JavaScrīpt脚本的大热而备受Web开发者亲睐。本文给大家分享五个有用的jquery小技巧,需要的朋友可以参考下
    2015-10-10
  • jQuery获得包含margin的outerWidth和outerHeight的方法

    jQuery获得包含margin的outerWidth和outerHeight的方法

    这篇文章主要介绍了jQuery获得包含margin的outerWidth和outerHeight的方法,涉及jQuery中outerWidth及outerHeight方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery实现搜索框功能实例详解

    jquery实现搜索框功能实例详解

    这篇文章主要介绍了jquery实现搜索框功能,搜索框实现搜索一个ul列表中的指定关键词的li。具体实现代码大家参考下本文
    2018-07-07
  • Ajax 数据请求的简单分析

    Ajax 数据请求的简单分析

    Ajax使用的关键对象是XmlHttpRequest对象,但是涉及到跨浏览器的的问题,所以,需要创建一个具兼容性的对象
    2011-04-04
  • jquery ajax同步异步的执行最终解决方案

    jquery ajax同步异步的执行最终解决方案

    添加async:false.即修改为同步了,什么意思?按同事解释就是,这是等这个ajax有了返回值后才会执行下面的js一语道破天机,怪不得以前很多ajax调用里面的赋值都不起作用
    2013-04-04

最新评论