4

フィドル: http://jsfiddle.net/vrec/

フィドルからわかるように、ホバーするとスパンの色を変更したいのですが、どういうわけか最初の3つの要素でホバーしても、ホバーイベントは最後のスパンに適用されます。

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

7 に答える 7

6

var前に追加$span:

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

現在、ループ内の各反復で上書きされるグローバル変数を宣言しています。

更新されたデモ

于 2013-04-30T13:01:23.597 に答える
5

ループの後に最後に反復された要素を含むグローバル$span変数は 1 つだけです。代わりに、var宣言を使用して変数をローカルにします。

$('.p').each(function() {
    var $span = $(this).children('span');
    $span.hover(
        function() {
            $span.css('color', 'red');
        },
        function() {
            $span.css('color', 'blue');
        }
    )
});
于 2013-04-30T13:04:35.817 に答える
1

必要はありません.each()

これを試すことができます：

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

ここでフィドルをチェックしてください

于 2013-04-30T13:04:29.120 に答える
1 
$("p span").hover(function(){

  $("span ").css("color","red");
}).mouseout(function(){
$("p span ").css("color","black");
});
于 2013-04-30T13:06:15.320 に答える
0

ここをチェックしてくださいhttp://jsfiddle.net/VREtC/2/

  $('.p').hover(
        function() {
            $(this).css('color', 'red');
        },
        function() {
            $(this).css('color', 'blue');
        }
    )
于 2013-04-30T13:02:18.983 に答える
0

これを試して

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

ここでフィドル

于 2013-04-30T13:01:05.967 に答える
0

コードを機能させたい場合は、次を$span使用してクロージャー変数を作成しますvar

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

デモ:フィドル

于 2013-04-30T13:04:06.830 に答える