本文實例講述了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 namevar sortLastString = sortLast.substring(11); // substring(11) 截取從11到最后的字符串 == desc / desc ascvar dataValue = sortArr[sortIndex].concat(sortLastString); // .concat() 生成新的字符串dataValue 就是排序方式的值
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
