Я хотел бы использовать атрибут данных, который есть в моем HTML, для отображения только того, который выбран в раскрывающемся списке.В то время у меня есть категории: «регионы» и «тематика», у меня есть 2 региона и 2 тематики.Дело в том, что по умолчанию отображаются все «Поездки», все карты с некоторым названием, содержанием и изображением.
То, что я пытаюсь сделать, - это отображать только поездки с region_id с 1 для примера, поэтому поездки с region_id на 2 больше не должны отображаться.
Я бы хотел сделать то же самое с тематикой.
В лучшем случае я бы хотел объединить обе категории, поэтому, если я выберу один регион (с идентификатором 1 дляпример) и тематический с идентификатором 2), он скрывает все поездки, которые не имеют идентификатора тезисов.Итак, region_id в 1 и thematic_id в 2.
Я слышал, что это не так сложно, используя атрибуты данных и JavaScript.
Дело в том, что я изучаю php, я действительно новичок в Javascript, я пытался с некоторыми изменениями использовать какой-то код, который я нашел в StackOverflow, но я не работал.Так что я иду за помощью.
Вот скриншот, чтобы вы могли увидеть, как он выглядит:
Как я уже говорил выше, я пыталсяиспользовать некоторый код 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>