1

我正在尝试用另一个替换一个 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>

我似乎无法让它工作，我相信这样定位多个 ID 是不可能的？无论如何，任何建议都会粉碎 - 谢谢！

4

3 回答 3

0

你绝对不能直接用 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";
于 2012-08-16T22:52:37.650 回答
0

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

于 2012-08-16T22:58:34.927 回答
0

你是正确的，你不能向document.getElementById(). 相反，您可以使用数组单独获取它们。有很多方法可以完成您正在尝试做的事情。这是一种基于遍历元素数组以隐藏和隐藏所有元素的简单方法。

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

// 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>
于 2012-08-16T22:54:01.360 回答