Fügen Sie die Div-ID nach dem Klicken zur URL hinzu und entfernen Sie sie aus der URL, nachdem Sie auf „Schließen“ geklickt haben

Question

Ich habe den Teil des Hinzufügens der Div-ID zur URL erledigt, aber ich kann sie nicht entfernen, nachdem ich hier auf die Schaltfläche „Schließen“ geklickt habe 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;
        });
    }

Ich habe einige Split-Funktionen usw. getestet, aber es funktioniert nicht und die URL bleibt dieselbe – verwenden Sie # + 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 = '';
  });
}