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

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相反，使用声明使变量成为本地变量：

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

Answer 3

$("p span").hover(function(){

  $("span ").css("color","red");
}).mouseout(function(){
$("p span ").css("color","black");
});

Answer 4

没有必要.each()

你可以试试这个：

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

在这里检查小提琴

Answer 5

尝试这个

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

或没有循环（根本不需要）

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

在这里摆弄

Answer 6

Please check here http://jsfiddle.net/VREtC/2/

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

Answer 7

If you want to make your code work, make $span a closure variable by using var

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

Demo: Fiddle