Ajoutez l'ID du div à l'URL après avoir cliqué, puis supprimez-le de l'URL après avoir cliqué sur Fermer le bouton

Question

J'ai ajouté l'ID du div à l'URL, mais après avoir cliqué sur le bouton de fermeture speaker--card div 中的类 speakers--overlay-close, je ne peux pas le supprimer.

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;
        });
    }

J'ai testé quelques fonctions fractionnées, etc. mais cela ne fonctionne pas et l'URL reste la même - utilisez # + id.

Answer 1

J'ai fini par faire quelque chose comme ça, mais je ne sais pas si c'est la bonne façon :

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

Étant donné que le bouton de fermeture se trouve à l'intérieur du div, lorsque vous cliquez dessus, l'événement se propage et exécute le gestionnaire d'événements de clic du div, qui ajoute à nouveau le hachage. Vous pouvez arrêter la propagation des événements en appelant event.stopPropagation() dans le gestionnaire d'événements du bouton de fermeture, puis supprimer le hachage de l'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 = '';
  });
}