Question

我想使用HTML中的data属性仅显示下拉选择中选择的属性。当时我必须分类：“区域”和“主题”，我有2个区域和2个主题。事情是默认情况下，所有“ Trips”，所有带有某些标题，内容和图像的卡都会显示出来。

我想做的是首先仅显示region_id为1的旅行，因此不再显示region_id为2的旅行。

那我想对主题做同样的事情。

充其量，我希望能够同时组合两个类别，因此，如果我选择一个区域（例如ID为1的区域，而ID为2的主题区域），它将隐藏所有没有这些内容的旅程ID。因此region_id为1，thematic_id为2。

我听说使用data属性和javascript并不难。

问题是我学习php，我真的是Java的新手，我尝试了一些更改以使用一些在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>

Answer 1

无需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>

仅显示下拉菜单中选择的一个类别，并根据数据属性隐藏所有其他类别

1 个答案: