Home>

When we buy goods on the e-commerce platform,Filter and query on the product list page based on brand, style, price range, etc.When you click on a condition,The set of conditions selected by the user is displayed on the page.And the corresponding eligible product information is displayed.So today we use jquery to achieve this front-end effect.

Operation effect diagram:

html

First, we categorize the query conditions.Place the condition container li.select-list and the selected condition container div.select-result on the page.

<ul>
    <li>
      <dl>
        <dt>Tops:</dt>
        <dd><a href="#">All</a></dd>
        <dd><a href="#">Knitwear</a></dd>
        <dd><a href="#">Woolen jacket</a></dd>
        <dd><a href="#">T-shirt</a></dd>
        <dd><a href="#">Down jacket</a></dd>
        <dd><a href="#">Cotton</a></dd>
        <dd><a href="#">Sweatshirt</a></dd>
        <dd><a href="#">windbreaker</a></dd>
      </dl>
    </li>
    <li>
      <dl>
        <dt>Pants:</dt>
        <dd><a href="#">All</a></dd>
        <dd><a href="#">Jeans</a></dd>
        <dd><a href="#">Little Feet/Pencil Pants</a></dd>
        <dd><a href="#">Casual pants</a></dd>
        <dd><a href="#">Leggings</a></dd>
        <dd><a href="#">Harem pants</a></dd>
      </dl>
    </li>
    <li>
      <dl>
        <dt>Selected condition:</dt>
        <dd>No filter condition selected for the moment</dd>
      </dl>
    </li>
  </ul>

After laying out the content,Add css style to 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>

jquery

When a user clicks on any condition,Mark the currently selected state,Adjacent conditions are 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 ();
    }
  });
});

Practical applications,We want to combine back-end programs,When the handsome selection conditions are achieved,The content of the page response will also change,Interested students can try it.

  • Previous Method for determining special IP address using InetAddress class in Java programming
  • Next In-depth analysis of the related use of enumerated types in Swift programming