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

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

评论是正确的。存在格式错误，但这可能只是一个错误，因为您说它隐藏了页面上的所有元素（即代码可以正常工作）。

如果您要在页面上有多个元素，则不能使用 ID。你需要使用类。我想我可能会添加一个甚至根本不需要 javascript 的解决方案，也许只是为了激发一种这样做的方式。它需要标记的某些内容（这需要elem 类是原始“img”元素的下一个兄弟）。这可以调整，但您需要确保 .img 框有 tabIndex="0" 以便它们可以接收焦点。

纯 CSS 解决方案

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

<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>

Answer 2

这里有一些问题。首先，您的函数接受一个名为“switchImgTag”的变量，但随后它似乎正在检查变量“switchView”的值，我在代码 sn-p 的其他地方没有看到它的定义，所以我认为这是一个错误.其次，getElementById 完全按照您的想法进行 - 通过 ID 获取元素。 EleID.style.display = "none" 不是 ID，所以这不起作用。
最后，如果没有看到您的 HTML，我无法确定，但您似乎对多个图像使用相同的 ID，这是一个非常糟糕的主意，所以我会先纠正这个问题。