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 ：

1. .search-sort li a,  .search-sort li a.asc,  .search-sort li a.desc { background-image :  sort.png }--灰色图标
2. .search-sort li.active a.desc { background-image: desc.png }--向下的蓝色图标
3. .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 namevar sortLastString = sortLast.substring(11); // substring(11) 截取从11到最后的字符串 == desc /  desc ascvar dataValue = sortArr[sortIndex].concat(sortLastString);  // .concat() 生成新的字符串

dataValue  就是排序方式的值