点击.close1/.close2移除.copy-btn的active类及相关功能实现问题

我来帮你完善这段代码，实现点击关闭按钮时清除.copy-btn的active类。这里是完整的实现方案：

$(document).ready(function() { 
    // 阻止复制按钮的默认跳转行为
    $(".copy-btn").click(function(event) { 
        event.preventDefault(); 
    }); 

    // 初始化Clipboard.js实例
    var clip = new Clipboard(".copy-btn"); 

    // 处理复制按钮的点击逻辑：给对应按钮添加active类
    $(".copy-btn").click(function(e) { 
        // 先清空所有复制按钮的active状态，避免多个按钮同时高亮
        $(".copy-btn").removeClass("active");
        
        // 给当前点击的按钮（以及拥有相同data-text的按钮）添加active类
        $.each($(".copy-btn"), function(index, value) { 
            if ($(value).attr("data-text") === $(e.target).attr("data-text")) { 
                $(value).addClass("active");
            } 
        });
    });

    // 点击.close1或.close2时，清除所有复制按钮的active类
    $(".close1, .close2").click(function() {
        $(".copy-btn").removeClass("active");
    });
});

额外说明： #

如果你的.close1或.close2是动态生成的（比如通过AJAX加载、后续JS添加到DOM），上面的直接绑定事件会失效，这时候需要用事件委托来处理：

// 动态元素的事件委托写法
$(document).on("click", ".close1, .close2", function() {
    $(".copy-btn").removeClass("active");
});

这样不管关闭按钮什么时候被添加到页面，点击事件都能正常触发，清除active类。

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