Question

我想让id为EleId的图像显示在页面的某个部分上，而不是显示在其他地方。这样做的方法是什么？提前谢谢。

<script type="text/javascript">
function toggleView(switchView) {
  if (switchView == "list") {
    document.getElementById(EleId).style.display = "none";
  }
  else if (switchView == "thumbs") {
    document.getElementById(EleId).style.display = "block";
  }
}
</script>

使用上面的代码会导致带有EleId的图像隐藏并显示在页面的任何位置。

也许在我希望受此代码影响的区域使用DIV标签？欢迎任何想法。

Answer 1

这里有一些问题。首先，您的函数接受一个名为＆＃39; switchImgTag＆＃39;的变量，但它似乎正在检查变量＆＃39; switchView＆＃39;的值，我看不到您在其他地方定义的值代码片段，所以我认为这是一个错误。其次，getElementById完全符合您的想法 - 通过ID获取元素。 EleID.style.display =＆＃34; none＆＃34;不是身份证，所以不会工作最后，如果没有看到您的HTML，我无法确定，但似乎您为多个图片使用了相同的ID，这是一个非常糟糕的主意，所以我会纠正这个问题。

Answer 2

评论者是对的。有格式化错误，但这可能只是一个错误，因为你说它隐藏了页面上的所有元素（即代码有点工作）。

如果您要在页面上放置多个元素，则无法使用ID。你需要使用类。我想我可能会添加一个甚至根本不需要javascript的解决方案，只是为了激发一种方法。它需要标记的某些内容（这需要elem类成为原始＆＃34; img＆＃34;元素的下一个兄弟。这可以调整，但您需要确保.img框具有tabIndex="0"，以便他们可以获得焦点。

仅限CSS的解决方案

＆＃13;

.img { 
  height: 5em;
  width: 5em;
  background: gray;
  border: .5em solid #eee;
  margin: 1em;
}

.elem { 
  width: 5em;
  height: 2em;
  background: lime;
  display: none;
}

.img:focus + .elem { display: inline-block; }

＆＃13;

<h1>Click the gray box to show the elem div</h1>
<div class="img" tabIndex="0"></div>
<div class="elem"></div>

<div class="img" tabIndex="0"></div>
<div class="elem"></div>

<div class="img" tabIndex="0"></div>
<div class="elem"></div>

<div class="img" tabIndex="0"></div>
<div class="elem"></div>

＆＃13;

在页面的某些部分显示带有id的图像，但在页面的其他位置不显示

2 个答案:

仅限CSS的解决方案