HTMLから1つの画像のみを表示し、JavaScriptを使用して他のすべてを非表示にします。
HTMLの構造：
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div>
<img id="nameOfImg">
</div>
<div/>
</div>
<div></div>
</body>
を繰り返して、document.body.children自分の画像以外のすべてを非表示にして、それは機能しましたが、残念ながら、その間にhtmlの構造が変更されました。だから私は、htmlの変更に対してより堅牢な別の解決策を見つけようとしています。
私の新しいアイデアはこれです：
function showImage(idName) {
document.body.style.display = 'none';
document.getElementById(idName).parentElement.style.display ='block'
}
しかし、それは何も表示しません。
あなたはこれを試すことができます。すべてdivをループしてdiv、画像が含まれているかどうかを確認し、含まれていない場合は非表示にします。
var els = document.querySelectorAll('div');
var img = document.getElementById("nameOfImg");
for(var el of els) {
if (!el.contains(img)) el.style.display = "none";
}<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>
<div></div>
<div>
<img id="nameOfImg" alt="img" src="test">
</div>
<div/>
</div>
<div>7</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加