【发布时间】：2014-03-09 12:00:38
【问题描述】：
我正在显示问题列表以及他们的答案和正确答案。为此，我正在使用 HTML 。现在，每个问题中都有一个标题为“Hide-Show Answers” 的超链接。当用户点击此超链接“选项”标题时，该问题的选项和正确答案应该会在显示时隐藏。如果这些东西是隐藏的，那么在点击超链接时，这些东西应该会显示出来。最初，当页面加载时，所有内容都应该像现在一样显示。还有一件事是当页面加载最初时，所有内容都会显示给用户，并且超链接的文本应该是“隐藏 Anwsers”，当用户点击这个链接时，内容应该被隐藏并且标题应该改变“显示答案”。以下是我的问题表的 HTML：
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:0 10px 0 10px;" align="center">
<tbody>
<tr>
<td>
<div class="sub_name" id="" >
<div style="height:800px; overflow:scroll; width:100%;">
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top">
<b>Question 1.<a href ="#" style="margin-left:300px;" class="fav_que" id="15957">Add To Favourite Question</a></b><br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<br /><b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>The dimensions of universal gravitational constant are</p></body></html>
<br/><b>QUE15957</b><br/>
<a href="#" class="show-ans">Hide-Show Answers</a>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
M-2L2T-2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
M-1L3T-2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
ML-1T-2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
ML2T-2
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 2
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top">
<b>Question 2.<a href ="#" style="margin-left:300px;" class="fav_que" id="37672">Add To Favourite Question</a></b><br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<br /><b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>If angular momentum quantum number can take value of <i>n</i> also (in addition to other possible values) then total number of electrons in first orbit would have been :</p></body></html>
<br/><b>QUE37672</b><br/>
<a href="#" class="show-ans">Hide-Show Answers</a>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
2
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
6
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
8
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
10
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 3
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top">
<b>Question 3.<a href ="#" style="margin-left:300px;" class="fav_que" id="38552">Add To Favourite Question</a></b><br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<br /><b>Question : </b>
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>For figure 24, the correct relation is -<br><img height="110" src="http://www.entranceprime.com/upload_media/questions/original/1328941281_38.JPG" width="172"></p></body></html>
<br/><b>QUE38552</b><br/>
<a href="#" class="show-ans">Hide-Show Answers</a>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=9329a28849bd94b3bcc49e3a4b69a595.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=c8c15583e8f5742625e6d80c71f3a691.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=af6f96bda5c2f575fc42e4751c5772fe.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
All of the above
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 4
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
而我尝试的jQuery代码如下：
$(document).ready(function() {
$(".show-ans").click(function(e){
e.preventDefault();
if($(this).parents("tbody").children("tr:last").is(":visible"))
{
$(this).parents("tbody").children("tr:not(:first)").hide();
$(this).html("Show Answer");
}
else
{
$(this).parents("tbody").children("tr:not(:first)").show();
$(this).html("Hide Answer");
}
});
});
现在我的问题是当我单击特定问题的超链接时，只有它的选项和正确的选项应该隐藏。其他问题的内容应该按原样显示，但这不会发生。当我单击特定问题的超链接时，所有内容都会被隐藏，包括我单击的超链接。我应该如何纠正这个问题？
【问题讨论】：
-
您的标记无效，请查看validator.w3.org/check
标签： javascript jquery html hyperlink show-hide