How do I implement a filter?

  • 0
    Hello everyone, I need to make a filter. The essence is as follows:
    there are products that are in a common wrapper and there is a filter with different categories of them, for example - Horror, Thriller and Drama. So - I need to implement a filter so that when I click on Horror, only horrors remain, when I click on Thriller, only thrillers, etc.

    I understand how to do this if you just change the display property, but here the problem is this:
    1. Initially, all films are given - and horror and thrillers and dramas.
    2. When clicking on horror - all films that do NOT belong to this genre should be removed from the markup (that is, clear the wrapper of films and leave only those that are horror)
    3. When you click on, say, the second category, for example, Dramas - remove all Horror films (remove all films from the markup) and add all films only related to drama there.

    Question # 1:
    How can you save all the movies so that you can later display the ones you need in this wrapper?

    Question # 2:
    Will it be an optimized solution if there are, say, 150-200 films?

    Question # 3:
    Can you please explain the very logic of this approach to the filter - I used to filter just by changing the display property, but here it is necessary to specifically change and save the markup itself.

    Question # 4:
    Tell pzhl what you need to read to make the filter that I have in mind?

    Just in case, I will throw off the pug code so that you can understand what structure I am talking about and what you need to work with:
    .catalog
            for c in catalog
                for ci in c
                    .catalog_item(data-category=ci.category)
                        a(href="/catalog/"+ci.link).item_link
                            .item_pic_wrapper
                                img.item_link_pic(src=ci.picExit alt=ci.picAlt data-src="/img/catalog/"+ci.pic)
                            p.item_link_title= ci.title
                            p.item_link_price ₽ #{ci.price}


    That is, the general wrapper is a directory, and all that is further is the films themselves.
    JavaScript Sophie Dudley, Jul 17, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!