为什么最后一个元素总是在悬停时触发？

Question

小提琴:http://jsfiddle.net/vretc/

正如你可以从小提琴中看到的那样,我希望在悬停在它上时改变跨度的颜色,但不知何故,即使我将鼠标悬停在前三个元素中,悬停事件也只适用于最后一个跨度.

HTML

<p class="p">
    <span>Span 1</span>
</p>

<p class="p">
    <span>Span 2</span>
</p>

<p class="p">
    <span>Span 3</span>
</p>

<p class="p">
    <span>Span 4</span>
</p>

jQuery的:

$('.p').each(function() {
    $span = $(this).children('span');
    $span.hover(
        function() {
            $span.css('color', 'red');
        },
        function() {
            $span.css('color', 'blue');
        }
    )
});

Answer 1

var之前添加$span:

var $span = $(this).children('span');

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

更新了演示

Answer 2

您只有一个全局$span变量,在循环之后将包含最后一个迭代元素.相反,使用var声明使变量local :

$('.p').each(function() {
    var $span = $(this).children('span');
    $span.hover(
        function() {
            $span.css('color', 'red');
        },
        function() {
            $span.css('color', 'blue');
        }
    )
});