Question

基本上，我的主页包含链接（），第二页具有多个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>

Answer 1

在第二页上，使所有div都不可见（例如style =“ display：none;）

添加一些JavaScript来提取网址参数（即var dataFilter =（document.URL.split）.split（“？”）。pop（）;）

现在使用该dataFilter变量获取将其作为属性的所有DIV（即document.querySelectorAll（“ [data-filter = dataFilter]”））

现在只需循环浏览返回的元素并使它们可见..

Answer 2

是的，有可能在您的设计中进行一些更改，并添加一些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（即根据查询字符串使其动态可见）。

我可以编写打开新页面并仅显示过滤后的div的函数吗？

2 个答案: