How to implement jQuery multi-condition filtering-JS Tutorial-php.cn

How to implement jQuery multi-condition filtering

不言

Release： 2018-06-25 11:53:33

Original

2498 people have browsed it

This article mainly introduces jquery to implement multi-condition filtering effects. It is recommended to everyone. Friends in need can refer to it.

The example in this article describes how jquery implements multi-condition filtering effects. Share it with everyone for your reference. The details are as follows:
When we purchase goods on the e-commerce platform, we filter and query based on brand, style, price range and other conditions on the product list page. When a certain condition is clicked, the set of conditions selected by the user will be displayed on the page. , and display the corresponding product information that meets the conditions. So today we use jQuery to achieve this front-end effect.
Running rendering:

HTML
First, we classify the query conditions and arrange the condition container li.select- list and selected condition container p.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>

Copy after login

After arranging the content, add css styles to the page content and load related 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>

Copy after login

jQuery
When the user clicks on any condition, the current selected state is marked, and the adjacent condition is unchecked. , and update the content of the selected condition container, please see the code:

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

Copy after login

In actual application, we need to combine the back-end program to realize the handsome selection conditions At this time, the content of the page response will also change. Interested students can try it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of jQuery file upload control Uploadify

About Jquery zTree tree control asynchronous loading operation

The above is the detailed content of How to implement jQuery multi-condition filtering. For more information, please follow other related articles on the PHP Chinese website!