Question

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

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

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

<强> Updated Demo

Answer 2

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

创建变量local

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

Answer 3

不需要.each()

你可以试试这个：

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

检查小提琴here

Answer 4

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

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

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

fiddle here

Answer 6

请点击此处http://jsfiddle.net/VREtC/2/

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

Answer 7

如果您想让代码正常工作，请使用$span

将var设为闭包变量

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

演示：Fiddle

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

7 个答案: