单击后将 div 的 ID 添加到 url,然后单击关闭 btn 后将其从 url 中删除

问题描述 投票:0回答:2

我已经完成了将 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
.

javascript html
2个回答
1
投票

由于关闭按钮在 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 = '';
  });
}

0
投票

我终于做了这样的事情,但不确定它是否是正确的方法:

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);
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.