Jquery each():回调中的变量总是最后一个值

Jquery each(): variable in callback always has last value?

本文关键字：变量 最后一个 each 回调 Jquery      更新时间：2023-09-26

我似乎不明白这是怎么回事。

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

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

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

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

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

为什么不

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

?

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

有一种更好的方式来表达你想要做的事情:

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