Показать только одну категорию, выбранную в раскрывающемся списке и скрыть все остальные на основе атрибута данных - PullRequest
0 голосов
/ 11 июля 2019

Я хотел бы использовать атрибут данных, который есть в моем HTML, для отображения только того, который выбран в раскрывающемся списке.В то время у меня есть категории: «регионы» и «тематика», у меня есть 2 региона и 2 тематики.Дело в том, что по умолчанию отображаются все «Поездки», все карты с некоторым названием, содержанием и изображением.

То, что я пытаюсь сделать, - это отображать только поездки с region_id с 1 для примера, поэтому поездки с region_id на 2 больше не должны отображаться.

Я бы хотел сделать то же самое с тематикой.

В лучшем случае я бы хотел объединить обе категории, поэтому, если я выберу один регион (с идентификатором 1 дляпример) и тематический с идентификатором 2), он скрывает все поездки, которые не имеют идентификатора тезисов.Итак, region_id в 1 и thematic_id в 2.

Я слышал, что это не так сложно, используя атрибуты данных и JavaScript.

Дело в том, что я изучаю php, я действительно новичок в Javascript, я пытался с некоторыми изменениями использовать какой-то код, который я нашел в StackOverflow, но я не работал.Так что я иду за помощью.

Вот скриншот, чтобы вы могли увидеть, как он выглядит:

screenshot

Как я уже говорил выше, я пыталсяиспользовать некоторый код JS, найденный при переполнении стека, но я точно не знаю, как приспособить его к моему случаю.справка

JS:

$('.card-trip').click(function() {
    //get the value of data-album-id-trigger
    var tid = $(this).data('data-thematic');
    var tid2 = $(this).data('data-region');
    var $current = $('.album-list[data-album-id="' + tid + '"]').toggle();
        $('.card-trip').not($current).hide()
})

TWIG HTML

<div class="column-all-cards-trip">
    <div class="row-all-cards-trip">

        {% for trip in trips %}
            <div data-region='{{ trip.region }}' data-thematic="{{ trip.thematic }}" id="trip-{{ trip.id }}" class="card-trip">
                <img src="{{ trip.picture }}" alt="imageCard" class="img-card-trips">
                <h2> {{ trip.title }} </h2>
            </div>
        {% endfor %}
    </div>
</div>

1 Ответ

0 голосов
/ 11 июля 2019

Может быть сделано без JQuery

"use strict";

// new block, so variables inside are scoped
{
  // this are the default values
  let values = {
    region: null,
    thematic: null
  }
  
  // called, whenever the form changes
  const onChange = (e) => {
    // e.target is the select, which changed
    const name = e.target.name;
    const value = e.target.value;
    // this is the uppermost common ancestor of both the form as of the cards
    const root = e.target.form.parentElement;
    
    // update the values object according to the chosen value of the select element
    values[name] = value;
    
    // hide all cards by default
    Array.from(root.getElementsByClassName('card-trip')).forEach(el => el.classList.add('hidden'))
    
    // assemble a selector for the cards to show
    let selector = ".card-trip";
    Object.keys(values).forEach(k => {
      if (values[k]) {
        // when two or more [data-x=y] selectors are combined that acts like a AND operator
        selector += `[data-${k}="${values[k]}"]`
      }
    })
    // show all the cards which match the selector
    root.querySelectorAll(selector).forEach(el => el.classList.remove('hidden'))
  }
  

  // call the change function if the form has changed
  document.getElementById('filter-trips').addEventListener('input', onChange)
}
.row-all-cards-trip {
  display: flex;
  flex-wrap: wrap;
}

.card-trip {
  flex-basis: calc(100% / 3);
}
.card-trip.hidden {
  display: none;
}
<div class="column-all-cards-trip">
  <form id="filter-trips">
    <select name="region" id="">
      <option value="">-- All Regions --</option>
      <option value="1">Region 1</option>
      <option value="2">Region 2</option>
    </select>
    <select name="thematic" id="">
      <option value="">-- All Thematics --</option>
      <option value="1">Thematic 1</option>
      <option value="2">Thematic 2</option>
    </select>
  </form>
  <br>
  <div class="row-all-cards-trip">

    <div data-region='1' data-thematic="1" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/1/100/100" alt="1" class="img-card-trips">
      <p> #1, Region 1; Thematic 1 </p>
    </div>

    <div data-region='2' data-thematic="1" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/2/100/100" alt="1" class="img-card-trips">
      <p> #2, Region 2; Thematic 1 </p>
    </div>

    <div data-region='1' data-thematic="2" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/3/100/100" alt="1" class="img-card-trips">
      <p> #3, Region 1; Thematic 2 </p>
    </div>

    <div data-region='1' data-thematic="2" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/4/100/100" alt="1" class="img-card-trips">
      <p> #4, Region 1; Thematic 2 </p>
    </div>

    <div data-region='2' data-thematic="2" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/5/100/100" alt="1" class="img-card-trips">
      <p> #5, Region 2; Thematic 2 </p>
    </div>

    <div data-region='2' data-thematic="1" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/6/100/100" alt="1" class="img-card-trips">
      <p> #6, Region 2; Thematic 1 </p>
    </div>

    <div data-region='2' data-thematic="2" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/7/100/100" alt="1" class="img-card-trips">
      <p> #7, Region 2; Thematic 2 </p>
    </div>

    <div data-region='2' data-thematic="1" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/8/100/100" alt="1" class="img-card-trips">
      <p> #8, Region 2; Thematic 1 </p>
    </div>

    <div data-region='2' data-thematic="1" id="trip-1" class="card-trip">
      <img src="https://picsum.photos/id/9/100/100" alt="1" class="img-card-trips">
      <p> #9, Region 2; Thematic 1 </p>
    </div>

  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...