How can I pass an id to a function in jquery?
The following code allows the user to click on the question of a flashcard and it displays the answer.
The problem is it displays all the answers for all the flashcards.
How can I pass the id of each flashcard so that the user can click on the title and toggle the question open and closed?
<!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 {
bac开发者_如何学编程kground-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>
You don't need to pass in the ID. Just traverse from the div clicked to the answer you want. this refers to the source of the event, which will in this case be a div with class "question".
$("div.question").click(function() {
$(this).next().fadeIn("slow");
});
Also, assuming your markup is accurate this can be simplified:
$("div > div.answer").hide();
to simply
$("div.answer").hide();
but I would actually do it with CSS:
div.answer { display: none; }
so no Javascript needs to be executed when the page loads. In my experience when using an async load of jQuery with the Google AJAX Libraries API like you are, the page will render and then your flashcard answers will visibly disappear. This tends to be undesirable. Just use CSS to hide them.
Also, jQuery is as of a day or two ago up to version 1.4.1.
Since the two divs are siblings, you can use the next method to get the next div.answer element:
$("div > div.question").click(function() {
$(this).next("div.answer").fadeIn("slow");
});
Check an example here.
When you are inside the event, you need to reference the this keyword, so that you are in the proper context. Otherwise, you are selecting globally, rather than specifically.
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div.flashcard div.answer").hide();
$("div.flashcard div.question").click(function() {
$(this).next('div.answer').fadeIn("slow");
});
});
This should be code you are looking for. I tested and it is working.
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.setOnLoadCallback(function() {
$("div > div.answer").hide();
$("div > div.question").click(function() {
if($(this).siblings('.answer').css('display') == 'none')
$(this).siblings('.answer').fadeIn("slow");
else
$(this).siblings('.answer').fadeOut("slow");
});
});
</script>
加载中,请稍侯......
精彩评论