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 函数之前将光标移到一个新段落上，那么第一个和第二个 setTimeout 函数都将作用于最后一个受影响的段落。例如：

a) 将光标移到/移出段落。在执行与 mouseout 事件关联的 setTimeout 函数之前，

b) 将光标移到/移出不同的段落。现在 setTimeout 函数

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

将连续两次为第二段选择背景颜色，而为第一段选择无背景颜色。我尝试将两个不同的变量（myElementOne 和 myElementTwo）与 jQuery(this) 值相关联，但无济于事。我将不胜感激一些帮助。谢谢。

4

2 回答 2

1

问题是您的myElement变量是在全局范围内定义的，并且每次mouseout执行都会覆盖它的先前值。

如果您使用 定义myElement，则将仅在当前事件的范围内定义var myElement = jQuery(this);-并且仅影响超时回调中的该元素。myElementmouseout

于 2012-06-18T22:20:40.880 回答
0

我看到它的方式myElement变成了全局的，并且在任何时候都只指一个 div。在它前面加上var，使它this在时间上引用特定的。

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

演示

于 2012-06-18T22:21:04.450 回答