※ ChatGPTを利用し、要約された質問です(原文:思ったように動作しません)
要素を表示非表示するボタンを作成する方法
このQ&Aのポイント
質問文章から要素を表示非表示するボタンを作成する方法について解説します。
スクリプトを使用して、特定の要素に表示非表示のボタンを追加することができます。
ただし、一部のブラウザでは表示非表示のボタンの位置や動作に問題がある場合があります。
試行錯誤してここまで来たのですが力尽きました・・・
memo="target"になっている要素を表示非表示するボタンを
隠す要素の上に表示するスクリプトなのですが、なかなか思うようにいきません。
<body>
<div memo="target">TARGET1</div>
<div memo="target">TARGET2</div>
<div memo="target">TARGET3</div>
<script type="text/javascript">
var AllTag = document.getElementsByTagName("*");
function sw(t){
sd = t.nextSibling.nextSibling.style;
if(sd.display == "none"){sd.display ="";}
else {sd.display ="none";}
}
function make(){
var link = document.createElement('a');
link.setAttribute("href","#");
link.setAttribute("onclick","sw(this)");
link.setAttribute("style","display:block;");
link.appendChild(document.createTextNode("表示・非表示"));
for(i=0;i<AllTag.length;i++){
if(AllTag[i].getAttribute("memo")=="target"){
//link = link.cloneNode(true);
AllTag[i].parentNode.insertBefore(link,AllTag[i].previousSibling);
alert(AllTag[i].innerText);
}
}
}
make();
</script>
</body>
メモ:
1.var AllTag = document.getElementsByTagName("*");をdivに変えて
//link = link.cloneNode(true);を有効にすると大分いい感じに動作するのですが、
対象がdivに限定されていないので*を使いたい。
2.*でlink = link.cloneNode(true);有効にするとダイアログボックスが無限に開くのでご注意
3.IEだと表示非表示ボタンの位置と、消える場所がうまくいかない
こんな感じなのですが、よろしくお願いします・・・
補足
Oh、自己解決してからみてしまいました、私はID自動で振付ける方法で。 できれば使いたくなかったんだけど・・・ Siblingの挙動がIEと他で違うかったんですねぃ。 IEが.nextSiblingの所を他は.nextSibling.nextSiblingっていう風にニ連続にしないといけないみたいです。.previousSiblingも同じくです。 そしてそして、回答ありがとうございました~!