Tambahkan ID div pada url selepas klik dan kemudian alih keluarnya daripada url selepas klik tutup btn

Question

Saya telah melakukan bahagian menambah ID div pada url, tetapi saya tidak boleh mengalih keluarnya selepas mengklik butang tutup dalam ini 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;
        });
    }

Saya telah menguji beberapa fungsi split dll tetapi ia tidak berfungsi dan url tetap sama - gunakan # + id.

Answer 1

Saya akhirnya melakukan sesuatu seperti ini, tetapi tidak pasti sama ada ini cara yang betul:

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

Memandangkan butang tutup berada di dalam div, apabila anda mengkliknya, acara merambat dan menjalankan pengendali acara klik div, yang sekali lagi menambah cincang. Anda boleh menghentikan penyebaran acara dengan memanggil event.stopPropagation() dalam pengendali acara butang tutup dan kemudian alih keluar cincang daripada 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 = '';
  });
}