jQuery多条件筛选如何实现

前端技术 2023/09/07 JavaScript

本文实例讲述了jquery实现多条件筛选特效。分享给大家供大家参考。具体如下：
我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。
运行效果图： 

HTML
首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。

<ul class=\"select\">  
    <li class=\"select-list\">  
      <dl id=\"select1\">  
        <dt>上装：</dt>  
        <dd class=\"select-all selected\"><a href=\"#\">全部</a></dd>  
        <dd><a href=\"#\">针织衫</a></dd>  
        <dd><a href=\"#\">毛呢外套</a></dd>  
        <dd><a href=\"#\">T恤</a></dd>  
        <dd><a href=\"#\">羽绒服</a></dd>  
        <dd><a href=\"#\">棉衣</a></dd>  
        <dd><a href=\"#\">卫衣</a></dd>  
        <dd><a href=\"#\">风衣</a></dd>  
      </dl>  
    </li>  
    <li class=\"select-list\">  
      <dl id=\"select2\">  
        <dt>裤装：</dt>  
        <dd class=\"select-all selected\"><a href=\"#\">全部</a></dd>  
        <dd><a href=\"#\">牛仔裤</a></dd>  
        <dd><a href=\"#\">小脚/铅笔裤</a></dd>  
        <dd><a href=\"#\">休闲裤</a></dd>  
        <dd><a href=\"#\">打底裤</a></dd>  
        <dd><a href=\"#\">哈伦裤</a></dd>  
      </dl>  
    </li>  
    <li class=\"select-result\">  
      <dl>  
        <dt>已选条件：</dt>  
        <dd class=\"select-no\">暂时没有选择过滤条件</dd>  
      </dl>  
    </li>  
  </ul>

布置好内容后，给页面内容加上css样式以及加载相关js。

<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\">  
<script type=\"text/javascript\" src=\"js/jquery.js\"></script>  
<script type=\"text/javascript\" src=\"js/script.js\"></script>

jQuery
当用户点击任意条件时，标记当前选中状态，相邻条件取消选中状态，并且更新已选条件容器内容，请看代码：

$(document).ready(function() { 
  $(\"#select1 dd\").click(function() { 
    $(this).addClass(\"selected\").siblings().removeClass(\"selected\"); 
    if ($(this).hasClass(\"select-all\")) { 
      $(\"#selectA\").remove(); 
    } else { 
      var copyThisA = $(this).clone(); 
      if ($(\"#selectA\").length > 0) { 
        $(\"#selectA a\").html($(this).text()); 
      } else { 
        $(\".select-result dl\").append(copyThisA.attr(\"id\", \"selectA\")); 
      } 
    } 
  }); 
  $(\"#select2 dd\").click(function() { 
    $(this).addClass(\"selected\").siblings().removeClass(\"selected\"); 
    if ($(this).hasClass(\"select-all\")) { 
      $(\"#selectB\").remove(); 
    } else { 
      var copyThisB = $(this).clone(); 
      if ($(\"#selectB\").length > 0) { 
        $(\"#selectB a\").html($(this).text()); 
      } else { 
        $(\".select-result dl\").append(copyThisB.attr(\"id\", \"selectB\")); 
      } 
    } 
  }); 
  $(\"#selectA\").live(\"click\", 
  function() { 
    $(this).remove(); 
    $(\"#select1 .select-all\").addClass(\"selected\").siblings().removeClass(\"selected\"); 
  }); 
  $(\"#selectB\").live(\"click\", 
  function() { 
    $(this).remove(); 
    $(\"#select2 .select-all\").addClass(\"selected\").siblings().removeClass(\"selected\"); 
  }); 
  $(\".select dd\").live(\"click\", 
  function() { 
    if ($(\".select-result dd\").length > 1) { 
      $(\".select-no\").hide(); 
    } else { 
      $(\".select-no\").show(); 
    } 
  }); 
});

实际应用中，我们要结合后端程序，实现帅选条件时，页面响应的内容也会变化，有兴趣的同学可以尝试下。

以上就是本文的全部内容，告诉大家js如何实现多条件筛选功能，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/18477

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案