欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js css 搜索 查询 实时取值 升降序排序

程序员文章站 2022-04-09 14:53:25
一。鼠标点击获取搜索条件中的被选中的值 创建方法 getAttrValue() 方法,每次的 .click 都要调用 function getAttrValue(){} 例如,把选中的值给到属性 data-value 。只需要每次点击,获取 li.active 的子集 a 的 .attr("data ......

一。鼠标点击获取搜索条件中的被选中的值

创建方法  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 就是排序方式的值