Javascript js-单击即可交换图像

我正在尝试用另一个div替换一个div，并关闭其他div：

JS

HTML

01
02
03
04

---

我似乎无法让这项工作，我相信，针对多个ID的是不可能的，像这样？不管怎么说，任何建议都会非常棒——谢谢

在直接的javascript中，您绝对无法做到这一点。getElementById函数仅从DOM返回单个元素

在这里可以找到一些文档： https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

如果要使用jQuery之类的工具包，可以执行以下操作：

$('div[id^="movie-con"]').hide(); // hide everything
$('div["movie-con"' + index + "]").show(); // show the one we want

var matches = document.getElementById("containerDiv").getElementsByTagName("img");
for( var i = 0; i < matches.length; i++ )
    matches[i].style.display = "none";
document.getElementById('movie-con' + index).style.display = "block";

因为您没有使用jQuery，所以它就不那么容易了。比如：

$('div[id^="movie-con"]').hide(); // hide everything
$('div["movie-con"' + index + "]").show(); // show the one we want

var matches = document.getElementById("containerDiv").getElementsByTagName("img");
for( var i = 0; i < matches.length; i++ )
    matches[i].style.display = "none";
document.getElementById('movie-con' + index).style.display = "block";

var matches=document.getElementById（“containerDiv”）.getElementsByTagName（“img”）；
对于（var i=0；i

您不能向

document.getElementById（）提供多个ID，这是正确的。相反，您可以使用一个数组单独获取它们。有很多方法可以完成你想做的事情。这是一种基于迭代元素数组来隐藏和隐藏所有元素的简单方法

此方法要求您定义要隐藏在每个函数中的节点数组，因此不理想

// Example:
function imgToSWF1() {
  var nodes = ['movie-con2', 'movie-con3', 'movie-con4'];

  // Loop over and hide every node in the array
  for (var i=0; i<nodes.length; i++) {
    document.getElementById(nodes[i]).style.display = 'none';
  }
  document.getElementById('movie-con').style.display = 'block';
}

//示例：
函数imgToSWF1（）{
var节点=['movie-con2'、'movie-con3'、'movie-con4']；
//循环并隐藏阵列中的每个节点
对于（var i=0；i您必须使用document.getElementById一次针对一个元素，例如
document.getElementById（'movie-con2'）.style.display='none'；document.getElementById（'movie-con3'）.style.display='none'；
等等等等。
您还可以使用Jquery兄弟选择器来显示或隐藏父标记中的所有兄弟元素。
太棒了，非常感谢-我知道一定有办法，真的需要了解有关数组等的更多信息。再次感谢。
// Array holds all nodes ids
var nodes = ['movie-con', 'movie-con2', 'movie-con3', 'movie-con4'];
// Function receives a node id which will be shown
function imageToSWF(nodeId) {
 // Loop over and hide every node in the array
  for (var i=0; i<nodes.length; i++) {
    document.getElementById(nodes[i]).style.display = 'none';
  }
  // And unhide/show the one you want, passed as an argument
  document.getElementById(nodeId).style.display = 'block';
}

<span onmouseover="imageToSWF('movie-con');"><div class="numbers">01</div></span>
<span onmouseover="imageToSWF('movie-con2');"><div class="numbers">02</div></span>
<span onmouseover="imageToSWF('movie-con3');"><div class="numbers">03</div></span>
<span onmouseover="imageToSWF('movie-con4');"><div class="numbers">04</div></span>