js to achieve simple product screening function

This article example shares the specific code of js to implement the product screening function for your reference. The specific content is as follows

Application scenario: Product screening

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
 }
 
 .choose {
 width: 500px;
 height: auto;
 margin: auto;
 }
 
 .choose nav {
 height: 50px;
 background-color: red;
 }
 
 .choose nav span {
 margin: 0 5px;
 }
 
 .choose .show {
 color: red;
 }
 
 .choose ul li {
 border: 1px solid black;
 }
 
 .choose ul li a {
 box-sizing: border-box;
 display: inline-block;
 width: 40px;
 border-left: 1px solid black;
 margin: 5px;
 padding-left: 5px;
 }
 </style>
</head>

<body>
 <div class="choose">
 <nav></nav>
 <ul>
 <li>
 <strong>Mobile:</strong>
 <a href="javascript:;">Xiaomi</a>
 <a href="javascript:;">Huawei</a>
 <a href="javascript:;">apple</a>
 <a href="javascript:;">OPPO</a>
 <a href="javascript:;">vivo</a>
 </li>
 <li>
 <strong>Price:</strong>
 <a href="javascript:;">3200</a>
 <a href="javascript:;">2600</a>
 <a href="javascript:;">899</a>
 <a href="javascript:;">2799</a>
 <a href="javascript:;">2299</a>
 </li>
 <li>
 <strong>Screen:</strong>
 <a href="javascript:;">399</a>
 <a href="javascript:;">600</a>
 <a href="javascript:;">800</a>
 <a href="javascript:;">1200</a>
 </li>
 </ul>
 </div>
</body>

</html>

<script type="text/javascript">
 var li = document.querySelectorAll('li');
 var stack = []; //Store three types of options

 for (var i = 0; i < li.length; i++) {
 // Get the option in each li for processing var options = li[i].querySelectorAll("a");
 for (var j = 0; j < options.length; j++) {
 //When an option is clicked, the category of the click is passed in. // options[j].onclick = Aclick.bind(options[j], [i]); //1. Separate the click event options[j].onclick = Bclick(i); //2. Separate the click event }
 }
</script>

When writing this, I want to separate this event function, but it has parameters. So the problem arises

How to separate an event function with parameters? ? ?

So: there are two methods

1. Use bind to change this pointer and return a non-executed function

function Aclick(index) {
// Delete nav
var choose = document.querySelector('.choose');
var nav = document.querySelector(".choose nav");
 choose.removeChild(nav);

 // Re-add using stack stack[index] = this.innerHTML;
 var nav = document.createElement("nav");
 for (k = 0; k < stack.length; k++) {
 if (stack[k] != "" && stack[k] != undefined) { // Skip the empty items in the stack and add span to nav again
  var span = document.createElement("span");
  var a = document.createElement("a");
  a.innerHTML = "X";
  a.href = "javascript:void(0);";
  span.innerHTML = stack[k];
  a.onclick = function() {
  stack[index] = "";
  nav.removeChild(this.parentNode);
  }
  span.appendChild(a);
  nav.appendChild(span);
 }
 }
 choose.insertBefore(nav, choose.children[0]);
}

2. Add a function outside the registration function to return the registration function

function Bclick(index) {
 return function() {
 // Delete nav
 var choose = document.querySelector('.choose');
 var nav = document.querySelector(".choose nav");
 choose.removeChild(nav);

 // Re-add using stack stack[index] = this.innerHTML;
 var nav = document.createElement("nav");
 for (k = 0; k < stack.length; k++) {
  if (stack[k] != "" && stack[k] != undefined) { // Skip the empty items in the stack and add span to nav again
  var span = document.createElement("span");
  var a = document.createElement("a");
  a.innerHTML = "X";
  a.href = "javascript:void(0);";
  span.innerHTML = stack[k];
  a.onclick = function() {
  stack[index] = "";
  nav.removeChild(this.parentNode);
  }
  span.appendChild(a);
  nav.appendChild(span);
  }
 }
 choose.insertBefore(nav, choose.children[0]);
 }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: