首页 > 数据库 > 多条件筛选,你用什么实现?
2019
08-08

多条件筛选,你用什么实现?

我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。

截图如下:



首先,我们将查询条件分类,在页面中布置条件容器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>


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

$(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();          }      });  }); 


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


扫码芷若 获取免费视频学习资料

编程学习

查 看2019高级编程视频教程免费获取