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

小提琴：

正如您从小提琴中看到的，我想在悬停时更改跨度的颜色，但不知何故，即使我在前三个元素中悬停任何元素，悬停事件也只适用于最后一个跨度

HTML

试试这个

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

或者没有循环（这根本不是必需的）

---

在

$span

之前添加

var

：

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

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

请检查这里

---

如果要使代码正常工作，请使用

var

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

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

---

演示：

不需要

。each（）

您可以尝试以下方法：

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

---

选中fiddle

您只有一个全局

$span

变量，循环后该变量将包含最后一个迭代的元素。相反，使用以下命令使变量成为局部变量：

---

问@Eli为什么他会因为你的答案有更多的错误而否决你的答案。@Eli你还没有回复它吗？这是另一回事。@Bergi当你将鼠标悬停在跨度上时，它会改变跨度的颜色。这就是OP想要的，不是吗？好的，只有当每个段落有一个以上的跨度时才不同。不确定这是否是OP的意图？@Bergi我已经根据OP提供的信息回答了。这不正确吗？你的实际标记是否每个段落都有一个以上的跨度？你有什么理由不这样做吗？

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

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

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

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

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

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