经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » jQuery » 查看文章
js css 搜索 查询 实时取值 升降序排序
来源:cnblogs  作者:晨蕙曦殷  时间:2018/10/19 9:12:24  对本文有异议

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

创建方法  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()---每次选中就走一次输出

  1. $(".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();
    })
    });
  1. // 默认第一个时间降序被选中
    $($(".search-sort").children()[0]).addClass("active")
    $($(".search-sort").children()[0]).children().addClass("desc").removeClass("asc");

三。获取排序方式的值

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

  1. /*
    * 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 就是排序方式的值
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号