Jquery each()：回调中的变量总是有最后一个值？答案

【问题标题】：Jquery each(): variable in callback always has last value?Jquery each()：回调中的变量总是有最后一个值？
【发布时间】：2011-12-10 23:20:18
【问题描述】：

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

<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/

应该对每个链接都这样做，而不是只更改最后一个链接，无论悬停在哪个链接上。

【问题讨论】：

stackoverflow.com/questions/341723/… , stackoverflow.com/questions/6978911/… , stackoverflow.com/questions/5555464/javascript-closure-of-loop
@pst - 这不是这里的问题。您是否阅读了 Rob 的答案或演奏了他的小提琴？
@pst - 显然 OP 打算将 $link 用作本地变量。很明显，Rob 的回答是正确的。
@lwburk 只为你：stackoverflow.com/questions/1956698/…

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

噢！非常感谢。我的大脑整天都在空白，哈哈。也可能与我最近一直在做的所有 PHP 有关。该死的可变变量范围！

【解决方案2】：

为什么不

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

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

【讨论】：

【解决方案3】：

有一种更好的方式来写你正在尝试做的事情：

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

【讨论】：