Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve the screening function of jquery, the article introduces in great detail, has a certain reference value, interested friends must read it!

Jquery to achieve filtering methods: 1, use the appendTo of jquery to add clicked elements to the list; 2, through the clone function of jquery to directly remove the contents of the attribute list.

This article operating environment: Windows7 system, jquery3.2.1, Dell G3 computer.

Jquery implements the filtering function.

Commodity attribute screening

Product attribute filtering is a very common function, usually only one attribute of the same type can be selected. For example, the price range, or brand, in order to make the selection look more intuitive, will generally list the options, and have the ability to click to deselect and click on the same kind of replacement.

Two complete implementations are given below.

Achieve 1:

Use jquery's appendTo to add clicked elements to the list (at the same time, check whether the list has elements of the same category, replace it, and return it to the original list)

Click on the element in the list item to return to the original div. Here, custom attributes are used to implement the return to the original div.

Of course, there are some problems with this implementation, because the class of div is limited to be consistent with the id of the parent element, which is very inconvenient.

And each time you need to rebind all events, a recursion. There is a lack of efficiency

Next, let's look at the second way of thinking, which is a little simpler and clearer. It's a little more efficient, and it doesn't need to be the same as id and class, and there's no need to rebind multiple events.

Animation .class1, .class2 {width: 100px; height: 40px; margin: 10px;} # count {background-color: sandybrown; width: 400px; height: 200px } Leather shoes, sandals, slippers, button,#class2, leather gloves, fur gloves (function check () {$('# class1 > button,#class2 > button'). Off ("click"). On ("click", function () {$("# count button." + $(this) .attr ("data-belong")). AppendTo ("#" + $(this) .attr ("data-belong")); $(this) .appendto ("# count") Check ()) $('# count button'). Off ("click"). On ("click", function () {$(this) .appendto ("#" + $(this) .attr ("data-belong")) check ()}) ()

Implementation 2:

Use the clone function of jquery so that the original list does not need to be changed. Clicking on the content in the attribute list only needs to be removed directly, and does not need to be consistent with id and class.

A little freer. The code is reduced, there is no recursion, there is no data modification binding problem, which is much more optimized than implementation 1.

.class1, .class2 {width: 100px; height: 40px; margin: 10px;} # count {background-color: sandybrown; width: 400px; height: 200px Leather shoes, sandals, slippers, gloves, leather gloves, fur gloves / / just keep the class logo of button consistent with data-belong. ("div:lt (2) button") .click (function () {$("div.count." + $(this) .attr ('data-belong')) .remove (); $(this) .clone () .appendTo ("div.count"); $(' .count button') .off ("click") .on ("click", function () {$(this) .remove () })}) the above is all the content of the article "how to filter jquery". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.