我遵循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.example.com/upload_media/questions/original/1330939560_49.jpg">
<img height="68" src="http://www.example.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 style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
<div 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/abc/pqr/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>
<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 style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
<div 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/abc/pqr/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/abc/pqr/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/abc/pqr/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/abc/pqr/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>
</ul>
</div>
</div>
</div>
</div>
<div style="text-align: center;"> <a class="btn btn-default">BACK</a>
</div>
</div>
单击“显示答案”后，如何隐藏/显示（切换）每个问题的答案。此外，当显示答案时，超链接应为“隐藏答案”，当隐藏答案时，超链接应为“显示答案”。如何使用jQuery实现这一目标？
上述HTML的jsFiddle是：http://jsfiddle.net/isherwood/rBCTg/
任何人都可以更新小提琴并使功能可行吗？
答案 0 :(得分：1)
每个问题都有一个数字。创建一个id等于问题编号的<span>。然后为该范围创建一个onclick，您可以在其中将范围的文本更改为＆＃39; Hide Answer＆＃39;并显示属于该问题的div。
<强> jQuery的：
<script type="text/javascript">
$(document).ready(function() {
var clickables = $('.clickable');
$.each(clickables, function(i, clickable) {
$(clickable).on('click', toggle);
});
function toggle() {
var id = this.id;
var span = $('#' + id);
var answerDiv = $('#answer_' + id);
if (answerDiv.is(':visible')) {
span.text("Show Answer");
answerDiv.css('display', 'none');
} else {
span.text("Hide Answer");
answerDiv.css('display', 'block');
}
}
});
</script>
JavaScript：
<script type="text/javascript">
var clickables = document.getElementsByClassName("clickable");
function toggle() {
var id = this.id;
var span = document.getElementById(id);
var answerDiv = document.getElementById('answer_' + id);
if (answerDiv.style.display === 'block') {
span.innerHTML = 'Show Answer';
answerDiv.style.display = 'none';
} else {
span.innerHTML = 'Hide Answer';
answerDiv.style.display = 'block';
}
}
for (var i = 0; i < clickables.length; i++) {
clickables[i].addEventListener('click', toggle, false);
}
</script>
<强> HTML：
<span id="1" class="clickable">Show Answer</span><br/>
<div class="answer" id="answer_1" style="display:none">
Here are the answers you may not see yet!
</div>
修改 为了满足它的全部需求，我添加了一个jQuery选项。经过测试并为我工作。可以看看这个！
答案 1 :(得分：-1)
您应该将每个问题区分为对应的<span>，然后在每个问题上加onClick。您可以按照自己的意愿隐藏/显示。