Edw*_*uay 3 javascript jquery function
以下代码允许用户单击闪存卡的问题并显示答案.
问题是它显示所有闪存卡的所有答案.
如何传递每个闪卡的ID,以便用户可以单击标题并切换问题打开和关闭？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div > div.answer").hide();
$("div > div.question").click(function() {
$("div > div.answer").fadeIn("slow");
});
});
</script>
<style>
div.flashcard {
margin: 0 10px 10px 0;
}
div.flashcard div.question {
background-color:#ddd;
width: 400px;
padding: 5px;
}
div.flashcard div.answer {
background-color:#eee;
width: 400px;
padding: 5px;
}
</style>
</head>
<body>
<div id="1" class="flashcard">
<div class="question">Who was Wagner?</div>
<div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div>
</div>
<div id="2" class="flashcard">
<div class="question">Who was Thalberg?</div>
<div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div>
</div>
</body>
</html>
您无需传入ID.只需从div中移动,点击你想要的答案.this指的是事件的来源,在这种情况下,它将是一个带有"问题"类的div.
$("div.question").click(function() {
$(this).next().fadeIn("slow");
});
此外,假设您的标记是准确的,这可以简化:
$("div > div.answer").hide();
简单地说
$("div.answer").hide();
但我实际上是用CSS做的:
div.answer { display: none; }
所以当页面加载时不需要执行Javascript.根据我的经验,当您使用Google AJAX Libraries API的异步加载jQuery时,页面将呈现,然后您的闪卡答案将明显消失.这往往是不合需要的.只需使用CSS来隐藏它们.
此外,jQuery是一两天前的1.4.1版本.
| 归档时间： |
|
| 查看次数： |
476 次 |
| 最近记录： |