jQuery for Designers Beginner's Guide Second Edition

上QQ阅读APP看书，第一时间看更新

Time for action – moving around an HTML document

Perform the following steps to move from one element to another in JavaScript:

We're going to keep working with the files we set up in the previous section. Open up the scripts.js file that's inside your scripts folder. Add a document ready statement, then write a new empty function called dynamicFAQ, as follows:
```
$(document).ready(function(){
});

function dynamicFAQ() {
  // Our function will go here  
}
```
Let's think through how we'd like this page to behave. We'd like to have all the answers to our questions hidden when the page is loaded. Then, when a user finds the question they're looking for, we'd like to show the associated answer when they click on the question.
This means the first thing we'll need to do is hide all the answers when the page loads. We can do this just like we did with the tab exercise in the Chapter 2, Enhancing Links. Get started by adding a class jsOff to the <body> tag, as follows:
```
<body class="jsOff">
```
Now, inside the document ready statement in scripts.js, add the line of code that removes the jsOff class and adds a class selector of jsOn:
```
$(document).ready(function(){
  $('body').removeClass('jsOff').addClass('jsOn');
});
```
Finally, in the styles.css file, add this bit of CSS to hide the answers for the site visitors who have JavaScript enabled:
```
.jsOn dd {
  display: none;
}
```
Now if you refresh the page in the browser, you'll see that the <dd> elements and the content they contain are no longer visible (see the following screenshot):
Now, we need to show the answer when the site visitor clicks on a question. To do that, we need to tell jQuery to do something whenever someone clicks on one of the questions or the <dt> tags. Inside the dynamicFAQ function, add a line of code to add a click event handler to the <dt> elements, as shown in the following code:
```
function dynamicFAQ() {
  $('dt').on('click', function(){
    //Show function will go here
  });
}
```
When the site visitor clicks on a question, we want to get the answer to that question and show it because our FAQ list is set up as follows:
```
<dl>
  <dt>Question 1</dt>
  <dd>Answer to Question 1</dd>
  <dt>Question 2</dt>
  <dd>Answer to Question 2</dd>
  ...
</dl>
```
We know that the answer is the next node or element in the DOM after our question. We'll start from the question. When a site visitor clicks on a question, we can get the current question by using jQuery's $(this) selector. The user has just clicked on a question, and we say $(this) to mean the question they just clicked on. Inside the new click function, add $(this) so that we can refer to the clicked question, as follows:
```
$('dt').on('click', function(){
  $(this);
});
```
Now that we have the question that was just clicked, we need to get the next thing, or the answer to that question so that we can show it. This is called traversing the DOM in JavaScript. It just means that we're moving to a different element in the document.
jQuery gives us the next method to move to the next node in the DOM. We'll select our answer by inserting the following code:
```
$('dt').on('click', function(){
  $(this).next();
});
```
Now, we've moved from the question to the answer. Now all that's left to do is show the answer. To do so, add a line of code as follows:
```
$('dt').on('click', function(){
  $(this).next().show();
});
```
If you refresh the page in the browser, you might be disappointed to see that nothing happens when we click the questions. Don't worry—that's easy to fix. We wrote a dynamicFAQ() function, but we didn't call it. Functions don't work until they're called. Inside the document ready statement, call the function as follows:
```
$(document).ready(function(){
$('body').removeClass('jsOff').addClass('jsOn');
dynamicFAQ();
});
```
Now, if we load the page in the browser, you can see that all of our answers are hidden until we click on the question. This is nice and useful, but it would be even nicer if the site visitor could hide the answer again when they're done reading it to get it out of their way. Luckily, this is such a common task, jQuery makes this very easy for us. All we have to do is replace our call to the show method with a call to the toggle method as follows:
```
$('dt').on('click', function(){
  $(this).next().toggle();
});
```
Now when you refresh the page in the browser, you'll see that clicking on the question once shows the answer and clicking on the question a second time hides the answer again.

What just happened?

We learned how to traverse the DOM—how to get from one element to another. Toggling the display of elements on a page is a common JavaScript task, so jQuery already has built-in methods to handle it and make it simple and straightforward to get this up and running on our page. That was pretty easy—just a few lines of code.