js-點擊交換圖片

Question

我正在嘗試將一個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嗎？ 無論如何，任何建議都會被粉碎-謝謝！

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兄弟姐妹選擇器來顯示或隱藏父標記中兄弟姐妹的所有元素。