Question

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

JS

function imgToSWF1() {
document.getElementById('movie-con2 movie-con3 movie-con4').style.display = 'none';
document.getElementById('movie-con').style.display = 'block';
}
function imgToSWF2() {
document.getElementById('movie-con movie-con3 movie-con4').style.display = 'none';
document.getElementById('movie-con2').style.display = 'block';
}
function imgToSWF3() {
document.getElementById('movie-con movie-con2 movie-con4').style.display = 'none';    
document.getElementById('movie-con3').style.display = 'block';
}
function imgToSWF4() {
document.getElementById('movie-con movie-con2 movie-con3').style.display = 'none';
document.getElementById('movie-con4').style.display = 'block';
}

HTML

<span onmouseover="src=imgToSWF1();"><div class="numbers">01</div></span>
<span onmouseover="src=imgToSWF2();"><div class="numbers">02</div></span>
<span onmouseover="src=imgToSWF3();"><div class="numbers">03</div></span>
<span onmouseover="src=imgToSWF4();"><div class="numbers">04</div></span>

我似乎无法让这个工作，我相信目标不能像这样？无论如何，任何建议都会粉碎 - 谢谢！

Answer 1

你绝对不能在直接的javascript中这样做。 document.getElementById函数只返回DOM中的单个元素。

可以在这里找到一些文档： http://www.w3schools.com/jsref/met_doc_getelementbyid.asp 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

既然你没有使用jQuery，那就不那么容易了。类似的东西：

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

Answer 2

您无法向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';
}

更好：

然而，这可以重构为一个函数。创建一个函数来接收要作为参数显示的节点。隐藏其他人。该数组应包含可能在任何情况下隐藏的所有节点，并且定义在比函数更高的范围内。

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

Answer 3

您必须使用document.getElementById一次定位一个元素，例如。 document.getElementById('movie-con2').style.display='none'; document.getElementById('movie-con3').style.display='none'; 等等您还可以使用Jquery兄弟选择器来显示或隐藏父标记中兄弟姐妹的所有元素。

js - 点击交换图片

3 个答案:

更好：

呼叫：