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

【问题标题】：Why last element always fired on hover?为什么最后一个元素总是在悬停时触发？
【发布时间】：2013-04-24 09:52:27
【问题描述】：

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

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');
        }
    )
});

【问题讨论】：

您的实际标记是否每个段落有多个跨度？
你有什么理由不do this with plain old css？

标签： javascript jquery jquery-selectors error-handling onhover

【解决方案1】：

试试这个

  $('.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');
    }
  )
});

fiddle here

【讨论】：

问@Eli 为什么他对你的答案投了反对票，但答案更错误。
@Eli 你还没恢复吗？

【解决方案2】：

在$span之前添加var：

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

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

Updated Demo

【讨论】：

【解决方案3】：

请在此处查看http://jsfiddle.net/VREtC/2/

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

【讨论】：

【解决方案4】：

如果您想让您的代码正常工作，请使用 var 将 $span 设为闭包变量

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

演示：Fiddle

【讨论】：

【解决方案5】：

不需要.each()

你可以试试这个：

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

检查小提琴here

【讨论】：

那是另一回事。
@Bergi 当你将鼠标悬停在它上面时它会改变跨度的颜色。这就是OP想要的不是吗？
好的，只有在每个段落有多个跨度时才会有所不同。不确定这是否是 OP 的意图？
@Bergi 我已经根据 OP 提供的信息进行了回答。这不正确吗？

【解决方案6】：

您只有一个全局$span 变量，在循环之后将包含最后一个迭代元素。相反，使用var declaration 使变量成为本地变量：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：