Могу ли я написать функцию, чтобы открыть новую страницу и отображать только отфильтрованные div? - PullRequest
0 голосов
/ 14 февраля 2019

В основном у меня есть главная страница со ссылками () и вторая страница с несколькими элементами div.Каждый div на второй странице имеет атрибут фильтра данных.Можно ли щелкнуть ссылку на главной странице и открыть вторую страницу, отображающую только отфильтрованный результат?

В приведенном ниже примере вторая ссылка откроет страницу, отображающую только div 3,4 и 5. и т. Д...

#Main Page
<div>
<a href="second-page.html?sweet">Sweet</a>
<a href="second-page.html?sour">Sour</a>
<a href="second-page.html?bitter">Bitter</a>
<a href="second-page.html?savoury">Savoury</a>
</div>

#Second page

<div data-filter="sweet">1</div>
<div data-filter="bitter">2</div>
<div data-filter="bitter sour">3</div>
<div data-filter="sour">4</div>
<div data-filter="savoury sour">5</div>
<div data-filter="savoury">6</div>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Да, это возможно с небольшими изменениями в вашем дизайне, и добавив немного стиля CSS и JavaScript, можно добиться того, чего вы хотите.

Во-первых, я предлагаю внести небольшие изменения в вашна главной странице, чтобы позже было легче получить строку запроса:

#Main Page
<div>
<a href="second-page.html?t=sweet">Sweet</a>
<a href="second-page.html?t=sour">Sour</a>
<a href="second-page.html?t=bitter">Bitter</a>
<a href="second-page.html?t=savoury">Savoury</a>
</div>

Затем на вашей второй странице я бы предложил изменить атрибуты с data-filter на class, так как это прощенацеливаться и манипулировать с помощью JavaScript, затем добавить стиль css и Javascript:

<head>
  <style>
    .taste {display: none; }
    .show {display: block; }
  </style>
</head>
<body>
    <div class="taste sweet">1</div>
    <div class="taste bitter">2</div>
    <div class="taste bitter sour">3</div>
    <div class="taste sour">4</div>
    <div class="taste savoury sour">5</div>
    <div class="taste savoury">6</div>
<script>
    (function () {
      // get the query string from url
      const params = new URLSearchParams(location.search);
      const query = params.get("t");    //get t=query_string
      // use the query string to select the related divs
      const taste = document.querySelectorAll(`.${query}`);
      for (let i = 0; i<taste.length; i++) {
        taste[i].classList.add("show");    // add css class to those divs
      }
    })();
  </script>
</body>

Все div-ы установлены в display:none в начале и использовать строку запроса, чтобы решить, какой div должен быть установлен в .show (т.е. сделать его видимым динамически на основе строки запроса).

0 голосов
/ 14 февраля 2019

На 2-й странице сделайте все div невидимыми для начала (т. Е. Style = "display: none;)

Добавьте немного JavaScript для извлечения параметра URL (т.е. var dataFilter = (document.URL.split) .split ("?"). pop ();)

Теперь используйте эту переменную dataFilter, чтобы получить все DIV, которые имеют ее в качестве атрибута (т.е. document.querySelectorAll ("[data-filter = dataFilter)] "))

Теперь просто переберите возвращенные элементы и сделайте их видимыми ..

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