如何使用jQuery在以下场景中显示/隐藏表的内容？ [英] How to show/hide the content of a table in following scenario using jQuery?
问题描述
我在我的网站上使用PHP，Smarty，jQuery等。我正在显示一个问题列表，它是可用的答案选项和该问题的正确答案。现在每个问题都有一个超链接。当用户单击特定问题的超链接时，该特定问题的内容（选项标题，实际选项，正确答案）应隐藏，如果它正在显示，并且如果内容被隐藏则应显示该内容。当显示内容时，超链接应该有文本隐藏答案，当隐藏内容时，超链接的文本应该是显示答案。还有一件事是，当页面最初加载时，应隐藏每个问题的上述内容（选项标题，实际选项，正确答案），并且每个问题的超链接文本应为显示答案。此问题列表的HTML如下：
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>
我应该如何实现这一目标？我尝试了很多来实现这一目标，但未能成功。在这方面，有谁请帮帮我？感谢您花了一些宝贵的时间来理解我的问题。等待你的回复。我试图显示的jQuery代码 - 隐藏内容如下。这对我来说不太好用。当我点击超链接时，问题的一切都被隐藏了。但在这种情况下，表单加载时会显示内容。现在我希望在表单加载时为每个问题隐藏内容。点击超链接，它应该适用于有关的问题。所以请帮助我实现这个目标：
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");
}
});
推荐答案
在文档中添加此代码.ready（）
$(".show-ans").each(function(){
$(this).parent().parent().parent().children("tr:not(:first)").hide();
$(this).html("Show Answer");
});
修改
$(".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();
});
这篇关于如何使用jQuery在以下场景中显示/隐藏表的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
