如何在单击相应的超链接时隐藏/显示qstn的答案，以及如何使用jQuery动态更改此超链接的文本？
我正在为我的网站使用PHP、Smarty、jQuery等。在我的网站上，我有一个页面，其中包含问题列表，以及可用的答案选项和正确答案选项。此页面使用“Smarty模板引擎”动态生成。因此，此页面可以包含一个或多个问题。为了理解，现在我只展示两个问题。现在的情况是，每个问题的可用答案选项都显示在“显示答案”标题下。最初，当页面加载时，所有问题的答案选项都应隐藏，heperlink文本应为“显示答案”。当用户单击特定问题的“显示答案”超链接时，应向用户显示该问题的可用答案选项和正确答案选项，并且超链接的标题应更改为“隐藏答案”。同样，如果用户单击超链接“隐藏答案”，则该特定问题的可用答案选项和正确答案选项应隐藏。 简言之，我想要的功能与以下JSFIDLE对HTML的功能完全相同： 参考小提琴链接是： 有人知道如何使用jQuery实现这一点吗？这对我会有很大帮助。谢谢你花了一些宝贵的时间来理解我的问题。等待你的提琴和回复。 我的非工作JSFIDLE是： 以下是两个问题及其答案的HTML代码（与我提供的js Fiddle相同），供您参考：如何在单击相应的超链接时隐藏/显示qstn的答案，以及如何使用jQuery动态更改此超链接的文本？,jquery,onclick,show-hide,jsfiddle,Jquery,Onclick,Show Hide,Jsfiddle,我正在为我的网站使用PHP、Smarty、jQuery等。在我的网站上，我有一个页面，其中包含问题列表，以及可用的答案选项和正确答案选项。此页面使用“Smarty模板引擎”动态生成。因此，此页面可以包含一个或多个问题。为了理解，现在我只展示两个问题。现在的情况是，每个问题的可用答案选项都显示在“显示答案”标题下。最初，当页面加载时，所有问题的答案选项都应隐藏，heperlink文本应为“显示答案”。当用户单击特定问题的“显示答案”超链接时，应向用户显示该问题的可用答案选项和正确答案选项，并且超链
-
问题1。
方向：
问题：
电路元件的电流-时间和电压-时间关系图如下所示：
QU66602
选项：
1)
2F电容
2)
1f电容
3)
电动势为1V的电压源
4)
正确答案：2
-
问题2。
方向：
问题：
推导单摆的时间周期表达式，它取决于长度、质量和重力加速度
QU80763
选项：
1)
2)
3)
4)
正确答案：1
类HTML
<div id="body">
<div class="container-fluid" style="padding-bottom: 50px;">
<div class="row-fluid">
<div class="col-sm-12" style="max-width: 768px; margin: 0 auto; margin-top: 10px; padding: 8px;">
<div style="width: 100%; margin: 0 auto; overflow: hidden; color: #381D6E; padding-bottom: 10px;">
<ul style="padding: 0;">
<li>
<div class="list-div">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="66602">Remove From Favourite Question</a></div>
<div style="text-align: left;">
Question 1.
</div>
<div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
<div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
<br/>
Question :<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Current versus time and voltage versus time graph of a circuit element is shown below :<img src="http://www.entranceprime.com/upload_media/questions/original/1330939560_49.jpg"><img height="68" src="http://www.entranceprime.com/upload_media/questions/original/1330939630_49.1.jpg" width="117"></p></body></html>
<div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE66602</div>
</div>
<a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
</div>
<div class="list-div">
<div class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
<div class='opt' style="width: 100%; margin-top: 8px;">
<label class="radio-section" for="radio_1">
<div class="radio-select">1)</div>
<div class="radio-div">
capacitance of 2 F
</div>
</label>
<label class="radio-section" for="radio_2">
<div class="radio-select">2)</div>
<div class="radio-div">
capacitance of 1 F
</div>
</label>
<label class="radio-section" for="radio_3">
<div class="radio-select">3)</div>
<div class="radio-div">
a voltage souice of emf 1V
</div>
</label>
<label class="radio-section" for="radio_4">
<div class="radio-select">4)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2d685d462cd3331c46f7fac8ca3e1f6a.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_2">
<div style="text-align: left;"><b>Correct Answer :</b>2</div>
</label>
</div>
</div>
</li>
<li>
<div class="list-div">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="80763">Remove From Favourite Question</a></div>
<div style="text-align: left;">
Question 2.
</div>
<div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
<div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
<br/>
Question :<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>
<div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE80763</div>
</div>
<a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
</div>
<div class="list-div">
<div class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
<div class='opt' style="width: 100%; margin-top: 8px;">
<label class="radio-section" for="radio_1">
<div class="radio-select">1)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_2">
<div class="radio-select">2)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_3">
<div class="radio-select">3)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_4">
<div class="radio-select">4)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_2">
<div style="text-align: left;"><b>Correct Answer :</b>1</div>
</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('.opt').hide();
$('a.show-ans').click(function (e) {
$(this).parent().next().find('div.opt').toggle();
if ($(this).text() == "Show Answers") {
$(this).text('Hide Answers')
}
else {
$(this).text('Show Answers')
}
e.preventDefault();
});
});
HTML
填充：0
HTML
<div id="body">
<div class="container-fluid" style="padding-bottom: 50px;">
<div class="row-fluid">
<div class="col-sm-12" style="max-width: 768px; margin: 0 auto; margin-top: 10px; padding: 8px;">
<div style="width: 100%; margin: 0 auto; overflow: hidden; color: #381D6E; padding-bottom: 10px;">
<ul style="padding: 0;">
<li>
<div class="list-div">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="66602">Remove From Favourite Question</a></div>
<div style="text-align: left;">
Question 1.
</div>
<div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
<div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
<br/>
Question :<br/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p>Current versus time and voltage versus time graph of a circuit element is shown below :<img src="http://www.entranceprime.com/upload_media/questions/original/1330939560_49.jpg"><img height="68" src="http://www.entranceprime.com/upload_media/questions/original/1330939630_49.1.jpg" width="117"></p></body></html>
<div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE66602</div>
</div>
<a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
</div>
<div class="list-div">
<div class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
<div class='opt' style="width: 100%; margin-top: 8px;">
<label class="radio-section" for="radio_1">
<div class="radio-select">1)</div>
<div class="radio-div">
capacitance of 2 F
</div>
</label>
<label class="radio-section" for="radio_2">
<div class="radio-select">2)</div>
<div class="radio-div">
capacitance of 1 F
</div>
</label>
<label class="radio-section" for="radio_3">
<div class="radio-select">3)</div>
<div class="radio-div">
a voltage souice of emf 1V
</div>
</label>
<label class="radio-section" for="radio_4">
<div class="radio-select">4)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2d685d462cd3331c46f7fac8ca3e1f6a.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_2">
<div style="text-align: left;"><b>Correct Answer :</b>2</div>
</label>
</div>
</div>
</li>
<li>
<div class="list-div">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="80763">Remove From Favourite Question</a></div>
<div style="text-align: left;">
Question 2.
</div>
<div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
<div style="width: 74%; float: left;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"></div>
<br/>
Question :<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>
<div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
<div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE80763</div>
</div>
<a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>
</div>
<div class="list-div">
<div class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
<div class='opt' style="width: 100%; margin-top: 8px;">
<label class="radio-section" for="radio_1">
<div class="radio-select">1)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_2">
<div class="radio-select">2)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_3">
<div class="radio-select">3)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_4">
<div class="radio-select">4)</div>
<div class="radio-div">
<img src="http://localhost/eprime/epmobile/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
</div>
</label>
<label class="radio-section" for="radio_2">
<div style="text-align: left;"><b>Correct Answer :</b>1</div>
</label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('.opt').hide();
$('a.show-ans').click(function (e) {
$(this).parent().next().find('div.opt').toggle();
if ($(this).text() == "Show Answers") {
$(this).text('Hide Answers')
}
else {
$(this).text('Show Answers')
}
e.preventDefault();
});
});