5.6.2　编程

1.在文本编辑器中打开chapter05目录下的faq.html文件。

这个文件已经包含了一个到jQuery文件的链接，并且$（document）.ready（）函数也准备好了（参见5.4节）。首先，在页面载入的时候隐藏所有的答案。

2.单击$（document）.ready（）函数后面的空格，并输入：$（'.answer'）.hide（）；。

每个答案的文本都包含在带有类answer的一个＜div＞标签中。这行代码选择每个＜div＞标签，并且将其隐藏（6.1.1节介绍hide（）函数）。保存页面并在Web浏览器中打开它。答案应该是隐藏的。

下一步是确定要为哪个元素添加一个事件监听器。既然当访问者单击问题的时候答案出现，我们必须选择FAQ中的每个问题。在这个页面上，每个问题是页面的主体中的一个＜h2＞标签。

3.按下回车键创建一个新行，把如下粗体所示的代码添加到脚本中：

＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

＜script＞

$（document）.ready（function（）{

$（'.answer'）.hide（）；

$（'.main h2'）

}）；//end of ready（）

＜/script＞

这是一个基本的子孙选择器，用来找到ID为main的一个元素中的所有＜h2＞标签（因此，它不会影响到页面中的任何＜h2＞标签）。现在，该添加事件了。click事件是很好的候选，然而，可以更好地满足需求，即单击问题可以显示或隐藏答案，因此使用jQuery toggle（）函数（参见5.4.3节的“toggle（）事件”部分）。这个函数使得每次单击鼠标的时候能够在两个不同的函数之间切换。

4.紧接着在步骤2输入的代码（在同一行）后面输入.toggle。

这段代码标志着toggle（）函数的开始，它接收两个匿名函数（参见4.10.1节）作为参数。第一个匿名函数在第一次单击时运行，第二个函数在下一次单击时运行。首先为第一个函数添加基本结构。

5.按回车键创建新行，然后输入：

function（）{

}

这段代码是函数的基本框架，表示了传递给toggle（）函数的第一个参数。接下来，为第二个函数添加基本结构。

6.添加如下粗体所示的代码，脚本如下所示：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{

4$（'.answer'）.hide（）；

5$（'.main h2'）.toggle（6

function（）{

7 8

}，

9

function（）{

10 11

}

12）；//end of toggle（）

13}）；//end of ready（）

14＜/script＞

确保没有漏掉上面第8行末尾的逗号。记住，这里的两个函数就像是传递给一个函数的参数（参见3.4.2节）。当调用一个函数时，可以用逗号把每个参数隔开，例如prompt（'Question'，'type here'）。换句话说，第8行的逗号隔开了两个函数（可以漏掉第12行的注释//end of toggle（），如果愿意这么做的话。它只是为了清楚地表明这一行标志着toggle（）函数的结束）。

现在，是时候添加我们所追求的效果了：初次单击＜h2＞标签的时候，需要显示相关的答案。尽管每个问题包含在一个＜h2＞中，而相关的答案则在紧接着＜h2＞标签的一个＜div＞标签中。此外，该＜div＞使用了一个answer类。因此，我们需要找到跟在单击的＜h2＞后面的＜div＞标签的一种方式。

7.在第一个函数中（步骤5中的第6行）添加：（'.answer'）.fadeIn（）；到脚本正如4.10.2节所述，$（this）应用了当前响应事件的元素，在这个例子中，是一个特定的＜h2＞标签。jQuery提供了几个函数使得在一个页面的基本结构中移动很容易。.next（）函数找到了紧跟在当前的标签之后的标签。换句话说，它找到了跟在＜h2＞标签之后的标签。可以通过把一个额外的选择器传递给.next（）函数来进一步改进这一查找，代码.next（'.answer'）会找到跟在＜h2＞后面的、具有一个answer类的第一个标签。最后，.fadeIn（）渐渐把答案淡入视线（fadeIn（）函数在6.1.1节介绍）。

注意：.next（）函数只是帮助我们在页面的DOM中导航的众多jQuery函数中的一个。要了解更多其他的辅助函数，可以访问http：//docs.jquery.com/Traversing。

现在，应该保存页面并在Web浏览器中查看它。单击页面上的一个问题，其下面的答案将会打开（如果没有，仔细检查你的输入并参考1.6节的故障排除提示）。

在下一个步骤中，将完成开关效果的第二部分，即当再次单击问题的时候隐藏答案。

8.添加如下所示代码段的第10行粗体所示的代码：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞2＜script＞

3$（document）.ready（function（）{

4$（'.answer'）.hide（）；

5$（'.main h2'）.toggle（6

function（）{

7$（this）.next（'.answer'）.fadeIn（）；

8}，

9 function（）{

10$（this）.next（'.answer'）.fadeOut（）；

11}

12）；//end of toggle（）

13}）；//end of ready（）

14＜/script＞

现在，再次单击的时候，答案淡出。保存页面并再次尝试。尽管页面功能正常，还是可以添加一个小的不错的设计改进。现在，每个问题的左边都有一个小加号。这个加号是一个常用的图标，用来表示“嗨，这里有更多内容”。要表示访问者可以单击来隐藏答案，用一个减号替代这个加号。通过添加＜h2＞标签添加或删除类，可以很容易地做到这点。

9.添加最后两行代码（下面的第8行和第12行）。最后的代码如下所示：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{

4$（'.answer'）.hide（）；

5$（'.main h2'）.toggle（

6 function（）{

7$（this）.next（'.answer'）.fadeIn（）；

8$（this）.addClass（'close'）；

9}，

10 function（）{

11$（this）.next（'.answer'）.fadeOut（）；

12$（this）.removeClass（'close'）；

13}

15）；//end toggle

15}）；

16＜/script＞

这段代码只是在＜h2＞标签第一次单击的时候向其添加了一个名为close的类，然后，在其第二次单击的时候删除这个类。减号图标在样式表中定义为一幅背景图像（再次，CSS使得JavaScript编程更容易）。

保存页面并预览。现在，当单击问题的时候，不仅会出现答案，而且问题图标也会变化（如图5-6所示）。

图　5-6　只用数行JavaScript，就可以使得页面元素随着鼠标单击显示或消失