這篇文章主要介紹jQuery如何實現(xiàn)條件搜索查詢、實時取值及升降序排序，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！專注中小微企業(yè)官網(wǎng)定制，網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

本文實例講述了jQuery實現(xiàn)條件搜索查詢、實時取值及升降序排序的方法。分享給大家供大家參考，具體如下：

一。鼠標點擊獲取搜索條件中的被選中的值

創(chuàng)建方法  getAttrValue() 方法，每次的 .click 都要調(diào)用  function  getAttrValue(){}

例如，把選中的值給到屬性 data-value 。只需要每次點擊，獲取 li.active 的子集  a 的 .attr("data-value")即可

eg:

var pubTime = $(getArr[0]).find("li.active").children().attr("data-value");

pubTime 就是第一個搜索項的值

二。排序方式的狀態(tài)（主要應(yīng)用于table 內(nèi)容的升降序排列需求）

排序方式分為三種狀態(tài)：

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 // 排序方式 給出一個數(shù)組
* 根據(jù) index 腳標找 sortArr 對應(yīng)的值
* */
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之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

以上是“jQuery如何實現(xiàn)條件搜索查詢、實時取值及升降序排序”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：jQuery如何實現(xiàn)條件搜索查詢、實時取值及升降序排序
網(wǎng)頁路徑：http://jinyejixie.com/article36/pggjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、動態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)