Блог

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

вот как выглядит страница без коллапса:

вот как выглядит свернутая страница:

Это мой html-код для раздела:

 <div class="container pt-3 pb-3">
    <div class="form-outline" id="customer-search-bar">
        <input type="search" id="filter" class="form-control" placeholder="Search" aria-label="Search" >
    </div>
    <div class="card-lists">
       <div class="row">
          {% for data in raw.CustomerDataEntries %}
          <div class="card col-sm-12 mb-3" id="card-perim">
             <div class="card-body">
                <h5 class="card-title">Customer ID: {{ data.ExternalId }}</h5>
                <h5 class="card-title">Forename: {{ data.Fields.forename }}</h5>
                <h5 class="card-title">Surname: {{ data.Fields.surname }}</h5>
                <h5 class="card-title">Postcode: {{ data.Fields.post_code }}</h5>
                <h5 class="card-title">Matches: {{ data.Matches }}</h5>
                <a href="{%  url 'portal:customers_details'  data.ExternalId %}" class="tableButton">Details</a>
                <a href="{%  url 'portal:customers_edit' data.ExternalId %}"  class="tableButton">Edit</a>
             </div>
          </div>
          {% endfor %}
       </div>
    </div>
</div>
 

Это мой js-код для раздела:

 let filter = document.querySelector('#filter');
filter.addEventListener('keyup', () => {
  searchID();
});

function searchID() {
  const input = filter.value.toUpperCase();
  const cardContainer = document.querySelector('.card-lists');
  const cardPerim = cardContainer.querySelectorAll('.card col-sm-12 mb-13');
  // const cardPerim = cardContainer.querySelectorAll('#card-perim');
  const cards = cardContainer.querySelectorAll('.card-body');

  cards.forEach(card => {
    //this option works, but does not target bootstrap container
    card.style.display = 'none';

    //here I am trying to change the css property, this does not work
    // cardPerim.style.display = 'none';

    //here I am trying to change the display property through bootstrap class attributes, this does not work
    // cardPerim.className = "d-none card col-sm-12 mb-3";
    card.querySelectorAll(".card-body h5.card-title").forEach(title => {
      if (title.innerText.toUpperCase().indexOf(input) > -1) {
        //this option works, but does not target bootstrap container
        card.style.display = "block";

        //here I am trying to change the css property, this does not work
        // cardPerim.style.display = "block";

        //here I am trying to change the display property through bootstrap class attributes, this does not work
        // cardPerim.className = "card col-sm-12 mb-3 ";
      }
    });
  });
}
 

Обратите внимание, что я безуспешно пытаюсь получить доступ к начальной загрузке «card col-sm-12 mb-13» через имя класса и идентификатор «card-perim». Я также изменяю его свойство отображения, изменяя стиль css и изменяя атрибуты класса начальной загрузки, оба безуспешно.

У кого-нибудь есть опыт в этом деле?

Для этого cardContainer.querySelectorAll('.card col-sm-12 mb-13') , пожалуйста, измените на cardContainer.querySelectorAll('.card .col-sm-12 .mb-13') для класса ref.

После изменений это должно сработать.