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），事实是我不知道我应该如何处理这个问题。

有什么想法吗？？

提前谢谢！

// -------------

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

要完全掌握您的所有问题有些困难。小提琴（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秒后隐藏工具提示，但在我的脚本上

1 个答案: