我正在显示问题列表及其答案和正确答案。为此，我正在为我正在显示的每个问题使用<table>。所以会有相同的没有。页面上显示的<table>为“否”。显示的问题。
现在每个题目中都有一个超链接，标题为“隐藏显示答案”（仅限现在）。当用户点击此超链接时，“选项”标题，该问题的选项和正确答案应该在显示时隐藏。如果隐藏了这些东西，那么在点击超链接时，这些东西应该显示出来。最初在页面加载时，所有内容都应该像现在一样显示。
还有一件事是，当页面加载时，最初会向用户显示所有内容，超链接的文本应为“隐藏答案”，当用户点击此链接时，内容应隐藏，标题应更改为“显示答案” ”
我需要使用jQuery和Javacript来实现它。请问有人可以在这方面帮助我吗？我遵循HTML代码：
<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="#">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="#">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="#">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>
答案 0 :(得分：1)
你可以这样编写代码..
$("a").click(function(e){
e.preventDefault();
$(this).parents("tbody").children("tr:last").toggle();
});
我还建议您为锚标签提供类名并相应地更改选择器
修改
$("a").click(function(e){
e.preventDefault();
if($(this).parents("tbody").children("tr:not(:first)").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");
}
});
如果您在单个页面中避免多个<html>，那会更好。你可以删除它。页面中只需要一个html标记..
答案 1 :(得分：0)
你需要给“show answers”的超链接一个id或class，我会使用一个类：
<a href="#" class="show-ans">show answers</a>
然后给出答案一个类：
<p class="ans">Answer 1</p>
现在jQuery：
$(".ans").hide();
$(".show-ans").click(function(){
$(".ans").show();
});
这将在单击链接时显示答案。 如果你想让它切换它们是显示还是隐藏替换.show（）;使用.toggle（）;
更新：
为每个表行提供自己独立的类，每个类都回答自己的类：
<a href="#" class="q1">show a1</a>
<a href="#" class="q2">show a2</a>
<tr class="a1">answer one</tr>
<tr class="a2">answer two</tr>
然后只为每一个重写jQuery：
$(".a1").hide();
$(".a2").hide()
$(".q1").click(function(){
$(".a1").toggle();
});
$(".q2").click(function(){
$(".a2").toggle();
});
答案 2 :(得分：0)
试试这个..
$("a").click(function(e){
$(".options").toggle();
$(".manage_box tr:nth-child(2)").toggle();
$(this).parents("tbody").children("tr:last").toggle();
});