JS - 上點擊

Question

交換圖像

我試圖用另一個更換一個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是不可能的這樣？無論如何，任何建議將粉碎 - 謝謝！

Answer 1

你是對的，你不能提供多個ID到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> 

Answer 2

你絕對不能直接做到這一點的JavaScript。 document.getElementById函數只返回DOM中的一個元素。

一些文檔可以在這裏有： http://www.w3schools.com/jsref/met_doc_getelementbyid.asp https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

如果你使用的工具包像jQuery你可以既然你不使用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"; 

Answer 3

你必須在通過document.getElementById，例如一次針對一個元素。 document.getElementById('movie-con2').style.display='none'; document.getElementById('movie-con3').style.display='none'; 等等 你也可以使用jquery兄弟選擇器來顯示或隱藏父標籤內的所有兄弟元素。