Jquery each（）：回调中的变量总是有最后一个值？

Question

似乎无法弄清楚这里发生了什么。

<div id="navigation">
    <ul id="navList">
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX.html">Discover</a></li>
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/documentation.html">Documentation</a></li>
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/download.html">Download</a></li>
        <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/donate.html">Donate</a></li>
    </ul>
    <script type="text/javascript">
        $('.navItem').each(function() {
            $link = $(this).children('a');
            $link.hover(
                function() {
                    $link.css('width', '224px');
                },
                function() {
                    $link.css('width', '192px');
                }
            )
        });            
    </script>
</div>

http://jsfiddle.net/Sth3Z/

应该为每个链接执行此操作，而不是只更改最后一个链接，无论哪个链接悬停。

Answer 1

在var之前添加$link：http://jsfiddle.net/Sth3Z/1/

    $('.navItem').each(function() {
        var $link = $(this).children('a');   // `var` added

目前，您正在声明一个全局变量，它将在循环中的每次迭代时被覆盖。

Answer 2

为什么不

$('.navItem > a').hover(
    function() {
        $(this).css('width', '224px');
    },
    function() {
        $(this).css('width', '192px');
    }
);

http://jsfiddle.net/Sth3Z/2/

Answer 3

有一种更好的方式来写你想做的事情：

$(".navItem a").hover(
    function() {
        $(this).css('width', '224px');
    },
    function() {
        $(this).css('width', '192px');
    }
);