0

私は一度動作するこの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);
}

クリックするとマスク（レイヤー）が開き、マスクをクリックすると-自動的に閉じます-ここまではすべて問題ありません。

2 回目のクリックでマスクが再び開きますが、2 回目にクリックしてもマスクは閉じません。

何か案は？

4

2 に答える 2

1

クリックするたびに新しいdivを作成しているので、divを非表示にする代わりに削除する必要があります

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

デモ

于 2013-01-12T20:22:20.197 に答える
1

オーバーレイを閉じるときに「maskIt」の最初のインスタンスを破棄していないため、バックグラウンドで構築されます。2 回目のクリック後にページを調べると、2 つの maskIt div が表示され、最初の div は非表示になっています。

getElementById('maskIt') を呼び出すと、ドキュメント内の最初の非表示が検出されるため、2 番目は非表示になりません。

最初のマスクを再利用してみませんか？

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/

于 2013-01-12T20:31:58.597 に答える