62-解决方案

5.15.2　解决方案

将链分解为单独的语句，在变量中存储各个jQuery对象：

// $('.foo').css({ fontsize: '18px' }).find('.bar').show();
var $foo = $('.foo');
$foo.css({ fontsize: '18px' });
var $bar = $foo.find('.bar');
$bar.show();

现在对于调试你有多种选择。其中之一是使用调试器的单步运行命令逐条运行这些语句，在每一步之后观察变量和页面的状态。

在这段代码中，应该在 $foo 和 $bar 赋值之后检查二者。每个变量的 .length 属性值是多少？这能够告诉你选中的DOM元素数量。每个对象是否包含预期的DOM元素？检查 [0] 、 [1] 、 [2] 等属性，查看这些DOM元素。

假如 $foo 包含正确的DOM元素，那么在调用 .css() 方法之后发生了什么呢？使用Firebug的CSS Inspector，你会发现CSS的 font-size 属性在方法调用之后没有变化。等一下！是 font-size 而不是 fontsize? 这就是问题所在。查阅文档，你发现编写这条语句的正确方式如下：

$foo.css({ fontSize: '18px' });
$foo.css({ 'font-size': '18px' });

这是一个问题，但是另一个问题是什么呢？在 $bar 赋值之后，如果查看 .length 属性，就会发现它的值为0。这告诉我们，选择元素的操作没有成功。查看HTML和JavaScript代码就能发现，类名拼写错误。

现在在原始的方法链上进行这两处修改：

$('.foo').css({ fontSize: '18px' }).find('.bar').show();

另一种方法是使用Firebug的日志（logging）语句：

// $('.foo').css({ fontsize: '18px' }).find('.bar').show();
var $foo = $('.foo');
console.log( $foo );
$foo.css({ fontsize: '18px' });
console.log( $foo.css('fontsize') );
var $bar = $foo.find('.bar');
console.log( $bar );
$bar.show();

这些 console.log() 调用将揭示 $bar 没有选中任何元素，但在试图记录字体大小时落入了陷阱：在 console.log() 调用中也拼错了 fontSize !

这种情况下组合多种调试技术很有帮助：记录这些变量，使用Firebug的检查器，重新阅读源代码，并让其他人帮你查找问题。