我可以在我的页面中将外部链接分配给一些不同的 id（模态）吗？

Question

我无法编写一个独特的 javascript 来分配要通过直接链接访问和显示的 ID。 在页面上，我有这个图片和标题库：

  <div class="modal-item">
        <a onclick="document.getElementById('id001').style.display='block'" class="item-link">
          <img class="thumb" src="image001"/>
      </div>
        <div id="id001" class="modal">
            <div class="modal-content">
                            <img alt="" src="image001big"/>
                        </div>
                     <caption></caption>
                </div>
            </div>
        </div>  
  <div class="modal-item">
        <a onclick="document.getElementById('id002').style.display='block'" class="item-link">
          <img class="thumb" src="image001"/>
      </div>
        <div id="id002" class="modal">
            <div class="modal-content">
                            <img alt="" src="image002big"/>
                        </div>
                     <caption></caption>
                </div>
            </div>
        </div>
...

但在我的所有研究之后，我只得到了这么多，它不起作用。此外，我不需要每次都指定 id，否则我会用脚本填充页面。

 <script type='text/javascript'>
$(document).ready(function() {

  if(window.location.href.indexOf('#id0743') != -1) {
    $('#id0743').modal('show');document.getElementById('id0743').style.display='block';
  }

});
</script>

Answer 1

有一种更简单的方法可以做到这一点。该窗口已经有一个名为window.location.hash 的内置对象，如果你转到https://example.net/#id001，它将返回#id001 这里是MDN's documentation 关于它。

位置：哈希

Location接口的hash属性返回一个USVString 包含一个“#”，后跟 URL 的片段标识符—— 该 URL 尝试定位的页面上的 ID。

片段未进行百分比解码。如果 URL 没有 片段标识符，该属性包含一个空字符串，“”。

---

这是一个工作版本

请注意，我是手动分配 ID，但仅此而已，因为我无法从 window 获取实际哈希。

$(document).ready(function() {
    let id = window.location.hash;
  id = "#id002";
  
  $(id).css('display', 'block');
});

// Pure JS example
window.addEventListener('load', (event) => {
  let id = window.location.hash.substring(1);
  id = "id001"
  document.getElementById(id).style.display='block';
});

.modal {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-item">
  <a onclick="document.getElementById('id001').style.display='block'" class="item-link">
    <img class="thumb" src="https://www.fillmurray.com/200/200" />
  </a>
</div>

<div id="id001" class="modal">
  <div class="modal-content">
    <img alt="" src="https://www.fillmurray.com/2000/2000" />
  </div>
  <caption></caption>
</div>


<div class="modal-item">
  <a onclick="document.getElementById('id002').style.display='block'" class="item-link">
    <img class="thumb" src="https://www.fillmurray.com/199/199" />
  </a>
</div>

<div id="id002" class="modal">
  <div class="modal-content">
    <img alt="" src="https://www.fillmurray.com/1999/1999" />
  </div>
  <caption></caption>
</div>