Question

我想在单击按钮5秒后显示一个阻止。我当前的代码不起作用。有什么问题吗？

if ($('#identify').click(function() {
  setTimeout(function() {
    document.getElementById('block1').classList.remove('hide');
  }, 5000);
}));

.hide {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary" style="padding: 10px;">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>

Answer 1

JS中的事件处理程序无法正常工作；即。通过检查if条件下的状态。

相反，您应该将事件处理函数附加到在发生特定事件时将运行的元素上。这是代码的结构方式：

jQuery($ => {
  $('#identify').on('click', function() {
    setTimeout(function() {
      $('#block1').removeClass('hide');
    }, 5000);
  });
});

.hide { display: none; }
#identify { padding: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>

请注意，上述代码中包含document.ready处理程序，并且还将内联CSS移入样式表中。

Answer 2

尝试以下代码：


        $(document).ready(function(){
            $('#identify').click(function() {
                setTimeout(function(){
                    document.getElementById('block1').classList.remove('hide');
                }, 5000);
            });
        });

Answer 3

下面的代码将立即显示taht div，然后将其隐藏，然后在5秒钟后按照您的问题重新包装。

<script>
$('#identify').click(function() {
$("#block1").removeClass('hide');
setTimeout(function(){
$("#block1").addClass('hide');
}, 1000);  
setTimeout(function(){
$("#block1").removeClass('hide');
}, 6000);    
});
</script>

单击按钮后5秒钟显示div

3 个答案: