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);

我正在学习JS (初级，0级)，事实是我不知道该如何处理这个问题。

有什么主意.？

提前感谢！

//？

<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

准确地理解你所有的问题有点困难。小提琴(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);
   }
}