问题
I'm using PHP, Smarty, jQuery, etc. for my website. I'm displaying a list of questions, it's available answer options and a correct answer for that question. Now there is a hyperlink with each question. When user clicks on the hyperlink of a specific question the content(Options heading, actual options, correct answer) for that specific question should hide if it's displaying and it should get display if the content is hidden. When content is shown the hyperlink should have text "Hide Answers" and when the content is hidden the text of hyperlink should be "Show Answers". One more thing is when the page loads initially the above content(Options heading, actual options, correct answer) for each question should be hidden and the text of hyperlink for each question should be "Show Answers". The HTML of this question list is as follows:
<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>
How should I achieve this? I tried a lot to achieve this but couldn't succeed. Caan anyone please help me in this regard? Thanks for spending some of your valuable time in understanding my issue. Waiting for your replies. The jQuery code I tried to show-hide the content is as follows. It's not working fine for me. Everything of the question gets hidden when I click on a hyperlink. But in this case the the content is showing when the form loads. Now I want the content hidden for each question when the form loads. On click of hyperlink it should work for concerned question. So please help me to achieve this:
$(".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");
}
});
回答1:
Add this code in document.ready()
$(".show-ans").each(function(){
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
});
Demo
Edit
$(".show-ans").each(function () {
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
$(this).parent().parent().show();
});
$(".question_info").show();
$(".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");
}
$(this).parent().parent().show();
});
Updated Fiddle
来源：https://stackoverflow.com/questions/22316799/how-to-show-hide-the-content-of-a-table-in-following-scenario-using-jquery