一仓技。鼠標(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):
默認(rèn)灰色未選中
點(diǎn)擊默認(rèn)降序? .desc
再點(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? 就是排序方式的值
推薦一下我自己的前端學(xué)習(xí)群562862926括堤,里面有大神總結(jié)的一套前端教學(xué)視頻碌秸,歡迎有興趣的朋友進(jìn)群一起學(xué)習(xí)