3

ここでは新しく、jQuery は初めてです。私は自分の質問/問題に対する答えを探しましたが、うまくいきませんでした。このコードに問題があります:

<p>Hello.</p>
<p>Good bye.</p>
<p>Ciao!</p>
<script>
jQuery('p').mouseover(
    function() {
        jQuery(this).css({backgroundColor:'red'});
    }
);
jQuery('p').mouseout(
    function() {
        myElement = jQuery(this);
        setTimeout(function(){
            color = ['red','green','blue','orange'];
            myElement.css({backgroundColor:color[Math.round(Math.random()*3)]});
        }, 1000
        )
    }
);
</script>

問題は、最後の setTimeout 関数が実行される前にカーソルを新しい段落に移動すると、最初と 2 番目の setTimeout 関数の両方が影響を受ける最後の段落に作用することです。例えば：

a) カーソルを段落の上/外に移動します。mouseout イベントに関連付けられた setTimeout 関数が実行される前に、

b) カーソルを別の段落の上/外に移動します。今 setTimeout 関数

myElement.css({backgroundColor:color[Math.round(Math.random()*3)]});

2番目の段落の背景色を2回連続して選択し、最初の段落の背景色を選択しません。2 つの異なる変数 (myElementOne と myElementTwo) を jQuery(this) 値に関連付けようとしましたが、役に立ちませんでした。助けていただければ幸いです。ありがとう。

4

2 に答える 2

1

問題は、myElement変数がグローバルスコープで定義されており、実行ごとmouseoutに以前の値が上書きされることです。

myElementで定義した場合var myElement = jQuery(this);、myElementは現在のイベントのスコープ内でのみ定義さmouseoutれ、タイムアウト コールバックでその要素のみに影響します。

于 2012-06-18T22:20:40.880 に答える
0

私の見方では、myElementグローバルになり、いつでも 1 つの div のみを参照します。その前に追加varして、時間内の特定を参照するようにしthisます。

jQuery('p').mouseout(
    function() {
        var myElement = jQuery(this);
        ...

デモ

于 2012-06-18T22:21:04.450 に答える