gpt4 book ai didi

jQuery 隐藏/显示复选框消息

转载 作者:行者123 更新时间:2023-12-01 00:16:25 24 4
gpt4 key购买 nike

我有一个复选框,当检查一个 div 时会弹出一条消息,如果取消选中该复选框,则会弹出另一个 div 并显示另一条消息。我让它正常工作,但是当您连续单击该复选框几次时,它会变得困惑并且消息无法正确显示。有什么想法可以让这项工作变得更好吗? (我是 jquery 部门的菜鸟,所以我们非常感谢任何帮助)。非常感谢!

Check it out!

HTML:

<input type="checkbox" name="chkWishList" id="chkWishList" />Checkbox Label<br />
<div class="message1"><span>Success<small></small></span></div>
<div class="message2"><span>Removed<small></small></span></div>

jQuery:

$(function() {
$(".message1").css("display", "none");
$(".message2").css("display", "none");
$("#chkWishList").click(function() {
if (this.checked) {
$(".message1").fadeIn("fast").fadeOut(4000);
$(".message2").hide();
}
else {
$(".message1").hide();
$(".message2").fadeIn("fast").fadeOut(4000);
}

});
});

最佳答案

需要停止当前的动画,还应该传入clearQueue和jumpToEnd参数

$(function() {
$(".message1").css("display", "none");
$(".message2").css("display", "none");
$("#chkWishList").click(function() {
if (this.checked) {
$(".message1").stop(true,true).fadeIn("fast").fadeOut(4000);
$(".message2").hide();
}
else {
$(".message1").stop(true,true).hide();
$(".message2").stop(true,true).fadeIn("fast").fadeOut(4000);
}

});
});

在这里摆弄:http://jsfiddle.net/thebeebs/LwNHd/8/

您的代码的问题是 jQuery 正在对动画进行排队,因为您有一个 4 秒的动画:如果多次按下按钮,动画队列会很快变长。

您可以在此处了解有关停止命令的更多信息: http://api.jquery.com/stop/

关于jQuery 隐藏/显示复选框消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5874882/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com