Javascript onClick->；Fiddle在第一次单击时工作，但停止工作-mistery

我有一个能用一次的

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

点击它打开一个蒙版（图层），点击蒙版-关闭它自己-所有罚款到这里

第二次单击时，遮罩将再次打开，但当您第二次单击它时，它将不会关闭

---

有什么想法吗？

每次单击都要创建一个新的div，而不是隐藏该div

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

---

关闭覆盖时，您没有销毁“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";
  }
}