Добавление идентификатора или класса в элемент точного соответствия - PullRequest
Новая
       27

Добавление идентификатора или класса в элемент точного соответствия

0 голосов
/ 29 апреля 2020

Привет, я расширяю свой предыдущий пост: Jquery соответствующие значения . Мне было интересно, если кто-нибудь знает, как это также фильтровать идентификатор или класс, как это происходит со значением данных. В конце я пытаюсь создать такой фильтр, и повторяющиеся элементы показывают, сколько раз они повторяются. Я использую TWIG для HTML из плагина Wordpress Advanced Custom Fields.

В конце концов я хочу, чтобы это было выпадающим списком вроде: https://i.stack.imgur.com/I06cT.png, который вы можете сослаться на этот пост: При построении выпадающего списка выберите фильтр . Дайте мне знать, если у вас есть какое-либо направление, как я должен действовать! Спасибо !!

Я также пытаюсь сделать это как в алфавитном порядке для местоположений, так и для сортировки по дате в разделе даты. Это формат даты: 26 февраля 2020 года.

HTML: 

<div class="filter" name="course-location" id="course-location">
  <div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
  <div class="filter-dropdown">
  {% for category in bloc.training_course_list_compact.course_categories %}
  {% for locationcourse in category.get_field('courses') %}
  {% for location in locationcourse.get_field('dates') %}
    <div class="course-location {{ category.category_class }}" id="{{ category.category_class }}" data-value="{{ location.location }}"><span class="{{ locationcourse.course_title }}"></span></div>
  {% endfor %}
  {% endfor %}
  {% endfor %}
  <div class="class-location type-filter"></div>
  </div>
</div>
<div class="filter" name="course-date" id="course-date">
  <div class="upper-filter"><h3>Start Date</h3><i class="fas fa-angle-down"></i></div>
  <div class="filter-dropdown">
  {% for category in bloc.training_course_list_compact.course_categories %}
  {% for datecourse in category.get_field('courses') %}
  {% for dates in datecourse.get_field('dates') %}
    <div class="course-date {{ category.category_class }}" id="{{ category.category_class }}" data-value="{{ dates.date }}"><span class="{{ locationcourse.course_title }}"></span></div>
  {% endfor %}
  {% endfor %}
  {% endfor %}
  <div class="class-date type-filter"></div>
  </div>
</div>

JQUERY: 

  //Location Filter
  // Extract the values to an array
  $("#course-location").each(function() {
    let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the city doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let location_count = locations.reduce(reducer, {});

    // Create HTML Elements
    for (var place in location_count) {
      $('.class-location').append(`<div class="inner-info"><h4>${place}</h4><span>${location_count[place]}</span></div>`)
    }
  });

  //Date Filter
  // Extract the values to an array
  $("#course-date").each(function() {
    let date = $('.course-date').map((i, e) => $(e).data('value')).toArray();

    let reducer = (a, c) => {
      // If the date doesn't exist 
      a[c] === undefined ?
        a[c] = 1 : // One occurrence, else
        a[c] = a[c] + 1;  // Increment count
      return a;
    }

    let date_count = date.reduce(reducer, {});

    // Create HTML Elements
    for (var dates in date_count) {
      $('.class-date').append(`<div class="inner-info"><h4>${dates}</h4><span>${date_count[dates]}</span></div>`)
    }
  });
...