【发布时间】：2014-04-14 15:33:04
【问题描述】：
我的网站使用 PHP、Smarty、jQuery 等。我正在显示一个问题列表，它是可用的答案选项和该问题的正确答案。现在每个问题都有一个超链接。当用户点击特定问题的超链接时，该特定问题的内容（选项标题、实际选项、正确答案）在显示时应隐藏，如果内容隐藏则应显示。
当显示内容时，超链接应该有文本“隐藏答案”，当内容被隐藏时，超链接的文本应该是“显示答案”。另一件事是，当页面最初加载时，每个问题的上述内容（选项标题、实际选项、正确答案）应该被隐藏，每个问题的超链接文本应该是“显示答案”。这个问题列表的HTML如下：
<div id="entrancelist">
<h2 class="heading">favourite questions</h2>
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="padding:5px;" align="center">
<tbody>
<tr>
<td>
<div class="sub_name" id="" >
<div style="height:auto; overflow:hidden; width:100%;">
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top" width="70%">
<b>Question 1.</b></td>
<td valign="top" align="left" width="30%">
<b><a href ="#" style="margin-right:0px;" class="fav_que" id="16164">Remove From Favourite Question</a></b></td></tr>
<tr class="question_info">
<td valign="top" colspan="2">
<br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
</td></tr>
<tr class="question_info">
<td valign="top">
<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>A 150 m long train is moving to north at a speed of 10 m/s. A parrot flying towards south with a speed of 5 m/s crosses the train. The time taken by the parrot the cross to train would be :<br></p></body></html>
</td>
<td valign="bottom" align="right"><b>QUE16164</b></td>
</tr>
<tr class="question_info">
<td valign="top" colspan="2">
<a href="#" class="show-ans">Show Answers</a>
</td>
</tr>
</td>
</tr>
<tr>
<td colspan="2">
<b>Options : </b>
</td>
</tr>
<tr>
<td class="options" colspan="2"> 1 .
30 s
</td>
</tr>
<tr>
<td class="options" colspan="2"> 2 .
15 s
</td>
</tr>
<tr>
<td class="options" colspan="2"> 3 .
8 s
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
10 s
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 4
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top" width="70%">
<b>Question 2.</b></td>
<td valign="top" align="left" width="30%">
<b><a href ="#" style="margin-right:0px;" class="fav_que" id="38552">Remove From Favourite Question</a></b></td></tr>
<tr class="question_info">
<td valign="top" colspan="2">
<br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
</td></tr>
<tr class="question_info">
<td valign="top">
<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>
</td>
<td valign="bottom" align="right"><b>QUE38552</b></td>
</tr>
<tr class="question_info">
<td valign="top" colspan="2">
<a href="#" class="show-ans">Show Answers</a>
</td>
</tr>
</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>
<table cellpadding="5" cellspacing="0" border="0" width="100%" class="manage_box">
<tr class="question_info">
<td valign="top" width="70%">
<b>Question 3.</b></td>
<td valign="top" align="left" width="30%">
<b><a href ="#" style="margin-right:0px;" class="fav_que" id="80763">Remove From Favourite Question</a></b></td></tr>
<tr class="question_info">
<td valign="top" colspan="2">
<br /><b>Direction : </b><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
</td></tr>
<tr class="question_info">
<td valign="top">
<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>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p></body></html>
</td>
<td valign="bottom" align="right"><b>QUE80763</b></td>
</tr>
<tr class="question_info">
<td valign="top" colspan="2">
<a href="#" class="show-ans">Show Answers</a>
</td>
</tr>
</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=b8bb97da575d595129425d5ba0cac48e.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=2fa6f58b13fc7b4dbb999484c01320ca.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=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td class="options" colspan="2"> 4 .
<img src="http://localhost/eprime/entprm/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
</td>
</tr>
<tr>
<td colspan="2">
<b>Correct Answer :</b> 1
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
我尝试显示-隐藏内容的 jQuery 代码如下。虽然它对我来说不是很好。当我单击超链接时，所有问题都会被隐藏。但是我希望在表单加载时隐藏每个问题的内容。单击超链接时，它应该适用于相关问题。所以请帮助我实现这一目标：
$(document).ready(function(){
$(".show-ans").each(function(){
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
});
$(".show-ans").click(function(e){
e.preventDefault();
if($(this).parent().parent().parent().children("tr:last").is(":visible"))
{
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
}
else
{
$(this).parent().parent().parent().children("tr:not(:first)").show();
$(this).html("Hide Answer");
}
});
});
JS Fiddle 链接是：http://jsfiddle.net/8cxL2/ 但它没有按照我的要求工作。
【问题讨论】：
-
你能提供一个jsfiddle.net吗？
-
@TilwinJoy:Following 是小提琴链接，但它不起作用。 jsfiddle.net/8cxL2
标签： jquery html hyperlink html-table show-hide