jQuery实现点击clipboard按钮后显示success-message类的问题求助

问题原因 #

你现有代码不生效的核心问题有两个：

• 你读取了.success-message的现有内容后又原封不动赋值回该元素，没有做任何显示状态的修改，自然不会触发展示
• 你的成功提示框默认没有设置隐藏状态，你需要先让它默认不可见，点击复制后再控制它显示，一段时间后自动隐藏

调整方案 #

第一步：修改HTML/CSS，默认隐藏成功提示 #

给.success-message添加display: none属性，默认不展示：

<div class="success-message">
    KOPIERT!
</div>

<style>
    .success-message{
        display: none; /* 新增这行，默认隐藏 */
        color: white;
        background-color: #2FAC66;
        padding: 1px 50px 1px 50px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 20px;
    }
</style>

第二步：修改jQuery代码，控制提示框显隐 #

调整后的代码如下，核心是复制成功后调用.show()显示提示，定时结束后调用.hide()隐藏提示：

var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
    const $clipboardBtn = $('.clipboard');
    const originalText = $clipboardBtn.html();
    const $successMsg = $('.success-message');
    
    // CSS function:
    const addCSS = s => document.head.appendChild(document.createElement("style")).innerHTML=s;
    
    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();

    // 复制成功后操作：
    $clipboardBtn.html(originalText);
    $successMsg.show(); // 显示成功提示
    addCSS(".clipboard{ font-size: 20px; padding: 4.8px 21.3px 4.8px 21.3px; }")

    // 1秒后还原状态
    setTimeout(function() { 
        addCSS(".clipboard{ font-size: 15px; padding: 9px 21.3px 9px 21.3px}")
        $clipboardBtn.html(originalText);
        $successMsg.hide(); // 隐藏成功提示
    }, 1000);
})

补充优化建议 #

你反复调用addCSS往页面头部插入样式的写法会产生大量冗余样式代码，更合理的方式是提前写好按钮的两种状态类，点击时切换类即可，示例：

/* 提前写好样式 */
.clipboard {
    font-size: 15px;
    padding: 9px 21.3px;
}
.clipboard.active {
    font-size: 20px;
    padding: 4.8px 21.3px;
}

然后JS里直接用$clipboardBtn.addClass('active')和$clipboardBtn.removeClass('active')切换状态即可，不需要动态插入样式。

内容的提问来源于stack exchange，提问作者ekalem