快捷導(dǎo)航

jQuery實(shí)現(xiàn)條件搜索查詢、實(shí)時(shí)取值及升降序排序的方法分析

更新時(shí)間：2019年05月04日 10:34:06 作者：晨蕙曦殷

這篇文章主要介紹了jQuery實(shí)現(xiàn)條件搜索查詢、實(shí)時(shí)取值及升降序排序的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

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

一。鼠標(biāo)點(diǎn)擊獲取搜索條件中的被選中的值

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

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

eg:

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

pubTime 就是第一個(gè)搜索項(xiàng)的值

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

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

1. 默認(rèn)灰色未選中
2. 點(diǎn)擊默認(rèn)降序 .desc
3. 再點(diǎn)擊升序 .asc

CSS ：

.search-sort li a, .search-sort li a.asc, .search-sort li a.desc { background-image : sort.png }--灰色圖標(biāo)
.search-sort li.active a.desc { background-image: desc.png }--向下的藍(lán)色圖標(biāo)
.search-sort li.active a.asc { background-image: asc.png !important; }--向上的藍(lán)色圖標(biāo)

JS ：默認(rèn)第一個(gè)排序降序被選中。切換排序方式，默認(rèn)展示降序。排序方式互斥

// 第一行： li a.asc--展示灰色圖標(biāo)
// 第二行: 第一次點(diǎn)擊 li 時(shí)， li.active a.desc，展示向下的藍(lán)色圖標(biāo)，并且清除 siblings .active ；同時(shí)，其他的排序方式默認(rèn) 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();
  })
});
// 默認(rèn)第一個(gè)時(shí)間降序被選中
$($(".search-sort").children()[0]).addClass("active")
$($(".search-sort").children()[0]).children().addClass("desc").removeClass("asc");

三。獲取排序方式的值

li.active a[class=" desc / asc "]

/*
* sortArr // 排序方式 給出一個(gè)數(shù)組
* 根據(jù) index 腳標(biāo)找 sortArr 對(duì)應(yīng)的值
* */
var sortArr = ["sortTime","sortTotalComment","sortIncreaseComment"]; //三種排序方式
var sortIndex = $(getArr[getLen-1]).find("li.active").index(); // 當(dāng)前那個(gè)按鈕被選中,返回腳標(biāo)
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 就是排序方式的值

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: