Question

我有一个jsfiddle可以使用一次。

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x){
  alert(x);
  var mask = document.createElement('div');
  mask.id = 'maskIt';
  mask.setAttribute("class", "maskIt");
  mask.onclick = function(){toggle_off('maskIt');}
  mask.innerHTML = 'click to close mask';
  document.body.appendChild(mask);
}

点击它会打开一个面具（图层），在面具上点击 - 自动关闭 - 所有这些都很好。

第二次点击时，再次打开遮罩，但是当你第二次点击它时它将不会关闭。

有什么想法吗？

Answer 1

除了隐藏div之外，您应该删除它，因为每次点击都会创建一个新div

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  var mask = document.getElementById(itemID);
  mask.parentNode.removeChild(mask);
}

DEMO

Answer 2

关闭叠加层时，您不会破坏“maskIt”的第一个实例，因此它们会在后台生成。如果在第二次单击后检查页面，您将看到两个maskIt div，第一个隐藏。

当你调用getElementById（'maskIt'）时，它会在文档中找到第一个隐藏的，因此不会隐藏第二个。

为什么不重复使用第一个面具？

function toggle_off(itemID) {
  alert(itemID + '->' + document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x) {
  alert(x);
  var mask = document.getElementById('maskIt');
  if (mask == null) {
    mask = document.createElement('div');
    mask.id = 'maskIt';
    mask.setAttribute("class", "maskIt");
    mask.onclick = function () {
      toggle_off('maskIt');
    }
    mask.innerHTML = 'click to close mask';
    document.body.appendChild(mask);
  }
  else
  {
    mask.style.display = "block";
  }
}

http://jsfiddle.net/dFp6f/2/

onClick - ＆gt;小提琴在第一次点击时工作，但停止工作 - 神秘

2 个答案: