Question

这里新增了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)]});

将连续选择TWICE作为第二段的背景颜色，而不选择第一段的背景颜色。我试图将两个不同的变量（myElementOne和myElementTwo）与jQuery（this）值相关联无济于事。我非常感谢你的帮助。感谢。

Answer 1

问题是你的myElement变量是在global scope中定义的，每个mouseout执行都会覆盖它的前一个值。

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

Answer 2

我看到它的方式，myElement变为全局，并且在任何时候都只引用一个div。在其前面添加var，使其及时引用特定的this。

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

Demo

在jQuery中重叠多个setTimeout

2 个答案: