我正在尝试同时显示工具提示,如果满足条件,我当前的脚本会显示一个 div(礼物):
if(total > 999 && total < 2999) { $('#gift-1').show();
#gift-2
也是如此:
if(total > 3000 && total < 4500) { $('#gift-2').show();
在那一刻,相应的工具提示应该是可见的:
#gift-1 = .tooltip-1
#gift-2 = .tooltip-2
这些应该只显示 9 秒,然后消失,直到再次显示 div ( #gift -1 or the div #gift-2
):
我试过类似的方法,但它对我不起作用:
if(total > 999 && total < 2999) { $('#gift-1').show();
$('.tooltip-1').fadeOut('slow');},9000);
I am learning JS (novice, level 0) and the truth is that I do not know how I should approach this issue.
任何想法...?
提前致谢!
//----------------
HTML
<div class="tooltip-1"></div>
<div class="tooltip-2"></div>
<div id="gift-1"></div>
<div id="gift-2"></div>
CSS
.tooltip-1,.tooltip-2 {display:none}
脚本
$(document).ready(function(){
function manageRegalo() {
var totalStorage = Number(localStorage.getItem("total"));
var total = Number($("#total").val().replace(".",""));
if(totalStorage != null && total === 0) {
total = totalStorage;
}
if(total > 999 && total < 2999) {
$('#gift-1').show();
}
else{
$('#gift-1').hide();
}
}
$(document).on('click', function (event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegalo();
localStorage.setItem('total', Number($("#total").val().replace(".","")));
}
});
manageRegalo();
});
// -------------------------------------------------
$(document).ready(function(){
function manageRegaloDos() {
var totalStorage = Number(localStorage.getItem("total"));
var total = Number($("#total").val().replace(".",""));
if(totalStorage != null && total === 0) {
total = totalStorage;
}
if(total > 3000 && total < 4500) {
$('#gift-2').show();
}
else{
$('#gift-2').hide();
}
}
$(document).on('click', function (event) {
const target = event.target;
if (target.matches('.comp-clone') || target.matches('.bbp')) {
manageRegaloDos();
localStorage.setItem('total', Number($("#total").val().replace(".","")));
}
});
manageRegaloDos();
});
最佳答案
准确把握您的所有问题有点困难。 fiddle (jsfiddle.net) 总是有用的,所以也许下次你可以做一个。
但是,如果我正确理解您的问题,问题就不是显示工具提示,而是在 9 秒后淡出,对吗?
我认为您可以更改此代码:
if(total > 999 && total < 2999) {
$('#gift-1').show();
$('.tooltip-1').fadeOut('slow');
},9000);
...此代码:(实际上您的代码可能会产生语法错误?):
if(total > 999 && total < 2999) {
$('#gift-1').show();
$('#tooltip-1').show(); // Maybe you did this already then you don't need this line.
window.setTimeout(function(){
$('.tooltip-1').fadeOut('slow');
},9000);
}
编辑:为了尊重工具提示只应在有多种方式时才显示的附加信息。一种是将工具提示存储在例如。一个窗口。多变的。另一个是通过 CSS 类。我在这里使用 CSS 类(这是未经测试的代码):
if(total > 999 && total < 2999) {
$('#gift-1').show();
if (!$('#tooltip-1').hasClass('alreadyShown')) {
$('#tooltip-1').show().addClass('alreadyShown');
window.setTimeout(function(){
$('.tooltip-1').fadeOut('slow');
},9000);
}
}
关于Javascript - 在 N 秒后隐藏工具提示,但在我的脚本中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55857864/