0

操作しようとしているこの小さな JavaScript コードがあります。

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

私がやろうとしているのは、複数の回答を持つ小さな質問を作成し、クリックごとに1つのメッセージを表示することです...

だから私はこのコードを構築しました：

<table class="hovertable">
<tr class="hovertable">
<td colspan="4" class="deep">What is the Generic Name of this Medication?</td>
</tr>
<tr onclick="javascript:ReverseDisplay('question1a');">
<td class="age">A.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Lovastatin.</td>
</tr>
<tr onclick="javascript:ReverseDisplay('question1b');">
<td class="age">B.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Atorvastatin.</td>
</tr>
<tr onclick="javascript:ReverseDisplay('question1c');">
<td class="age">C.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Simvastatin.</td>
 </tr>
 <tr onclick="javascript:ReverseDisplay('question1d');">
<td class="age">D.</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
Pravastatin</td>
 </tr>
 </table>

ここにメッセージを表示する部分があります。

<div id="question1a" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Correct.</td>
</tr>
</table></div>
<div id="question1b" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Not Correct</td>
</tr>
</table></div>
<div id="question1c" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Not Correct</td>
</tr>
</table></div>
<div id="question1d" style="display:none;">
<table class="hovertable">
<tr>
<td class="age">Answer</td><td colspan="3" class="notes" onmouseover="this.style.backgroundColor='#ffba74';" onmouseout="this.style.backgroundColor='#FFFFFF';">
This is Not Correct</td>
</tr>
</table></div>

私が理解しようとしているのは、一度に 1 つのメッセージのみを表示する方法です。したがって、回答の 1 つをクリックする前は何も表示されませんが、回答をクリックするとメッセージが表示されます。ただし、別のものをクリックすると消えて、クリックしたメッセージが表示されます。混乱しないことを願っています。

誰でも私を助けることができますか？

4

1 に答える 1

0

jQuery などで DOM 操作を行った方がよいでしょう。

それは次のように動作します

$("#question1").show().siblings().hide();

とりわけhttp://api.jquery.com/siblings/を参照してください

于 2012-08-07T17:51:43.763 に答える