Question

我具有单击功能来复制链接。当用户单击“复制链接”按钮时，我正在显示“链接已复制”消息。一定时间后如何删除此文件？

这是我目前编写的显示块的内容，但是在settimeout结束后我无法让它消失。

$(function () {
    $('.copy-link').click(function () {
        setTimeout(function () {
            $('p.link-copied').css("display", "block");
        }, 200);
    });
    return false;
});

<p class="link-copied" style="display:none;">link copied</p>

Answer 1

您的代码在延迟后显示 <p>。

最简单的方法是复制setTimeout之外的行，然后修改setTimeout内的行以隐藏...

$(function () {
    $('.copy-link').click(function (e) {
        e.preventDefault(); // Added for the example "Click" link
        $('p.link-copied').css("display", "block");
        setTimeout(function () {
            $('p.link-copied').css("display", "none");
        }, 2000);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="copy-link">Click</a>
<p class="link-copied" style="display:none;">link copied</p>

Answer 2

尝试这个会帮助您*

$( document ).ready(function() {
    $("#hide").hide();
});
   
    $( "#show" ).click(function() {
    $("#hide").show();
  	 setTimeout(function () {
            $('#hide').hide();
        }, 2000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<html>
  <div id="show">
  click me 
  </div>
  <p class="link-copied" id="hide">link copied</p>
</html>

*

点击时显示div，然后经过一段时间后隐藏

2 个答案: