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 name
var sortLastString = sortLast.substring(11); // substring(11) 擷取從11到最後的字串 == desc /  desc asc
var dataValue = sortArr[sortIndex].concat(sortLastString);  // .concat() 生成新的字串

dataValue  就是排序方式的值