if 语句太多？页面上显示 div 取决于哈希参数

Question

我有多个页面（大约 250 个），每个页面的末尾都有一个按钮，该按钮会将用户发送到包含下载链接的同一页面。因此，单击这些按钮后，用户将被带到此页面，该页面有 250 个隐藏按钮，但正确的按钮仅在 url 具有特定哈希参数时才会显示。

我弄清楚了下面的代码。但是，因为我有 250 个页面，这意味着页面上会变成 250 个 if 语句和 250 个隐藏按钮。是不是太多了...有更好的方法吗？

<!-- Page 1: -->

<a href="download-page/#download1">Download PDF</a>

<!-- Page 2: -->

<a href="download-page/#download2">Download PDF</a>

<!-- Page 3: -->
<a href="download-page/#download3">Download PDF</a>

下载页面（download-page）：

<style>

    #hidden_download1 { display none; }
    #hidden_download2 { display none; }
    #hidden_download3 { display none; }

</style>

<script>
    $(function() {
    if (location.hash === "#download1") {
    $("#hidden_download1").fadeIn(700);
    }
    $(function() {
    if (location.hash === "#download2") {
    $("#hidden_download2").fadeIn(700);
    }
    $(function() {
    if (location.hash === "#download3") {
    $("#hidden_download3").fadeIn(700);
    }
});
<script>

<div id="hidden_download1"><a class="download-btn" href="https://drive.google.com/file/1">Download File</a></div>

<div id="hidden_download2"><a class="download-btn" href="https://drive.google.com/file/2">Download File</a></div>

<div id="hidden_download3"><a class="download-btn" href="https://drive.google.com/file/3">Download File</a></div>

有什么建议吗？这是太乱了还是没关系？有一个更好的方法吗？我有点生疏了所以请放轻松！

非常感谢！

Answer 1

您需要定义从

id

获取 DOM

location.hash

的规则，然后下面的代码就可以正常工作了。

<script>
    $(function() {
       const id = getIdFromHash();
       $(id).fadeIn(700);
    }
});
<script>

您现在可以决定如何编写 HTML 和

getIdFromHash

函数。我会建议类似 -

function getIdFromHash() {
   const hash = location.hash;
   const id = hash; // keep id and hash values same
   return id;
}

但是，如果您出于某种原因不想保持

hash

和

id

相同，那么对于您原来的问题，这会起作用

function getIdFromHash() {
   const hash = location.hash;
   const id = "#hidden_" + hash.substring(1);
   return id;
}