Фильтрация с помощью ** li-фильтра данных ** - PullRequest
Новая
       4

Фильтрация с помощью ** li-фильтра данных **

0 голосов
/ 28 марта 2020

Я пытаюсь отфильтровать часть данных из моей коллекции mongoDB с помощью фильтра li . Я никогда не делал этого, таким образом, неопытен. Мой код не работает, пожалуйста, проверьте его и протяните мне руку. 

(function ($) {
"use strict";

// Porfolio isotope and filter
$(window).on('load', function () {
    var portfolioIsotope = $('.portfolio-container').isotope({
      itemSelector: '.portfolio-item'
    });
    $('#portfolio-filter li').on( 'click', function() {
      $("#portfolio-filter li").removeClass('filter-active');
      $(this).addClass('filter-active');

      $("#portfolio-filter li button").removeClass('btn-primary');
      $(this).children('button').addClass('btn-primary');
  
      portfolioIsotope.isotope({ filter: $(this).data('filter') });
    });
  });

})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 col-10">
            <ul id="portfolio-filter">
                <li data-filter="*" class="filter-active"><button>Everything</button> </li>
                <% categories.forEach(cat => { %>
                    <li data-filter=".filter-<% cat.name %>"><button><%= cat.formal %></button></li>
                <% }); %>
            </ul>
        </div>
               
        <div class="portfolio-container row d-flex d-flex justify-content-center center">
        <% if(noMatch && noMatch.length > 0){ %>
            <div class="alert alert-danger" style="height: 50px;" role="alert">
                <h1 style="font-size: 20.8px;"> <%= noMatch %> </h1>
            </div>
        <% }; %>


        <% let count = 0; %>
        <% projects.forEach((project) => { %>
        <% count = count === 3 ? 0 : count; %>      

            <div class="col-lg-6 col-md-6 col-sm-6 col-10 mb-4 <%= project.categories ? project.categories.split(' ').map(el=>'filter-'+el).join(' ') : 'null' %>" data-wow-delay="0.<%= count %>s">   
    
                <div class="card card h-100 border-0 shadow rounded-0">           
                    <div class="card-img-top">
                        <p class="card-title mt-0 mb-0 grid-style" > <i class="bar"></i> <%= project.name %></p>           
                        <div class="embed-responsive-item">
                            <a href="/projects/<%= project.slug %>"> 
                                <img src="<%= project.image %>" alt="" class="img-fluid w-100" />
                            </a>
                        </div>            
                    </div>  
                </div>
            </div>
            <% count++; %>
        
        <% }); %>

У меня также есть библиотека isotope.pkgd. js, которую я решил не включать в размещенный код. У меня также есть категории. js файл, в котором содержится объект с парами ключ-значение (name: - formal :). Этот файл также правильно требуется в моем приложении . js. Единственное место, в котором я не внес никаких изменений, - это мои маршруты / проект. js, но это потому, что я понятия не имею, какие изменения мне придется делать там. Цените всю помощь, которую я могу получить!

...