Javascript - 在 N 秒后隐藏工具提示，但在我的脚本中

Question

我正在尝试同时显示工具提示，如果满足条件，我当前的脚本会显示一个 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();
    });

Answer 1

准确把握您的所有问题有点困难。 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);
   }
}