1

ある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>

これを機能させることができないようで、このように複数のIDをターゲットにすることはできないと思いますか？とにかく、どんなアドバイスも壊してしまうでしょう-ありがとう！

4

3 に答える 3

0

に複数の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';
}

より良い：

ただし、これは1つの関数にリファクタリングできます。引数として表示したいノードを受け取る関数を1つ作成します。他を非表示にします。配列には、どのような状況でも非表示になる可能性のあるすべてのノードが含まれ、関数よりも高いスコープで定義されている必要があります。

// 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 に答える
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を使用して、一度に1つの要素をターゲットにする必要があります。document.getElementById('movie-con2').style.display='none'; document.getElementById('movie-con3').style.display='none'; などなど。Jquery兄弟セレクターを使用して、親タグ内の兄弟であるすべての要素を表示または非表示にすることもできます。

于 2012-08-16T22:58:34.927 に答える