如何使用jquery关闭处理程序重置多个项目的计时器？
如何使用jquery关闭处理程序重置多个项目的计时器？
提问于 2021-08-20 02:58:48
// The Javascript Code
var timer;
$(document).ready(function () {
$("li").hover(
function () {
clearTimeout(timer);
$(this).css("background-color", "red");
},
function () {
var $self = $(this);
timer = setTimeout(function () {
$self.css("background-color", "transparent");
}, 1000);
}
);
});<!-- The HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>title</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
考虑上面的代码片段(只有html和小的jquery代码片段)。
我所拥有的是多个li项。当用户将鼠标悬停在这些li项上时，背景颜色应该变为红色。但是，当它们悬停在"off“时，背景颜色应该恢复为默认值(透明)。但是，我希望在鼠标悬停事件后有1000ms的超时。
然而，这并没有像我预期的那样工作(可能是由于单个计时器变量)，因为如果我快速地将鼠标悬停在多个li项上，那么只有最后一个悬停的"off'd“元素被更改为默认背景，而所有其他li项都停留在红色的背景色中。
更新：
我想为li项单独重置颜色。也就是说，如果我悬停在li-1上，然后是li-2，如果我悬停在上面，那么li-1应该被重置，然后几毫秒后，li-2应该被重置。我不想让他们同时重置所有内容。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-20 03:14:03
您不需要有任何timer对象。只需如下所示更改您的脚本：
$(document).ready(function () {
$("li").hover(
function () {
$(this).css("background-color", "red");
},
function () {
var $self = $(this);
setTimeout( function(){
$self.css("background-color", "transparent");
} , 1000 );
});
});
var timer;
$(document).ready(function () {
$("li").hover(
function () {
$(this).css("background-color", "red");
},
function () {
var $self = $(this);
setTimeout( function(){
$self.css("background-color", "transparent");
} , 1000 );
}
);
});<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>title</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</body>
</html>
Stack Overflow用户
发布于 2021-08-20 03:19:56
删除代码中的清除超时，它将按您的预期工作。
// The Javascript Code
var timer;
$(document).ready(function () {
$("li").hover(
function () {
$(this).css("background-color", "red");
},
function () {
var $self = $(this);
timer = setTimeout(function () {
$self.css("background-color", "transparent");
}, 1000);
}
);
});<!-- The HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>title</h1>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68856508
复制相关文章
相似问题
腾讯云开发者
