點擊後將 div 的 ID 新增到 url，然後點擊關閉 btn 後將其從 url 中刪除

Question

我已經完成了將div 的ID 新增到url 的部分，但在點擊此speaker--card div 中的類別speakers--overlay-close 中的關閉按鈕後，我無法刪除它。

var myDivs = document.getElementsByClassName('speakers--card');
    var closeDiv = document.getElementsByClassName('speakers--overlay-close');

    for(var i = 0; i < myDivs.length; i++) {
        myDivs[i].addEventListener('click', function (event) {
          console.log(this.getAttribute("id"));
          let thisID = this.getAttribute("id");
          window.location.href = window.location.href + "#" + thisID;
        });
    }

我已經測試了一些分割函數等，但它不起作用，並且 url 保持不變 - 使用 #id。

Answer 1

我最終做了這樣的事情，但不確定這是否是正確的方法：

var myDivs = document.getElementsByClassName('speakers--card');
var closeDivs = document.getElementsByClassName('speakers--overlay-close');

for(var i = 0; i < myDivs.length; i++) {
    myDivs[i].addEventListener('click', function (event) {
      let thisID = this.getAttribute("id");
      window.location.href = window.location.href + "#" + thisID;
    });
}
for(var i = 0; i < closeDivs.length; i++) {
    var closeDiv = closeDivs[i];
    closeDiv.onclick = function() {
      var newURL = location.href.split("#")[0];
      window.history.pushState('object', document.title, newURL);
    }
}

Answer 2

由於關閉按鈕位於 div 內部，因此當您按一下它時，事件會傳播並執行 div 的點擊事件處理程序，該處理程序再次新增雜湊值。您可以透過在關閉按鈕事件處理程序中呼叫 event.stopPropagation() 來停止事件傳播，然後從 url 中刪除哈希值。

var myDivs = document.getElementsByClassName('speakers--card');
var closeDiv = document.getElementsByClassName('speakers--overlay-close');

for (var i = 0; i < myDivs.length; i++) {
  myDivs[i].addEventListener('click', function (event) {
    let thisID = this.getAttribute("id");
    window.location.hash = thisID;
  });

  closeDiv[i].addEventListener('click', function (event) {
    event.stopPropagation();
    window.location.hash = '';
  });
}