如何实现按钮复用单个弹窗且内容独立？前端方案咨询

完全没必要给每个按钮单独创建弹窗，复用同一个就够了，问题出在这两点：

• 当前代码把点击事件绑定在了父容器firstRow上，而非每个按钮
• 弹窗打开时没有清空之前输入的内容

直接修改代码即可，以下是调整后的完整版本：

<div class='firstRow'>
    <button class="button" data-animal="animal1">animal1</button>
    <button class="button" data-animal="animal2">animal2</button>
</div>
<div id="myPopup">
    <span id="myPopupClose">x</span>
    <h3>Enter any animal</h3>
    <textarea id="myPopupTextbox" placeholder="Write something..."></textarea>
</div>
<script>
    // 获取所有按钮元素
    const buttons = document.querySelectorAll(".firstRow .button");
    const popup = document.getElementById("myPopup");
    const closeBtn = document.getElementById("myPopupClose");
    const textbox = document.getElementById("myPopupTextbox");
    // 记录当前点击的按钮标识（按需使用）
    let currentAnimal = "";

    // 给每个按钮绑定点击事件
    buttons.forEach(btn => {
        btn.onclick = function() {
            // 清空文本框内容
            textbox.value = "";
            // 记录当前按钮的标识（可选，用于后续区分提交对象）
            currentAnimal = this.dataset.animal;
            // 显示弹窗
            popup.style.display = "block";
            document.body.style.opacity = "0.25";
        }
    });

    // 统一关闭弹窗的逻辑
    function closePopup() {
        popup.style.display = "none";
        document.body.style.opacity = "1";
    }

    closeBtn.onclick = closePopup;

    window.onclick = function(event) {
        if (event.target == popup) {
            closePopup();
        }
    }
</script>

关键修改说明： #

• 将事件绑定从父容器改为每个按钮，用querySelectorAll获取所有按钮后循环绑定
• 每次打开弹窗时强制清空textarea的内容，确保每次打开都是空白状态
• 给按钮添加data-animal属性，方便后续区分是哪个按钮触发的弹窗（比如提交时关联对应按钮的数据）
• 把关闭弹窗的逻辑抽成独立函数，避免重复代码

修改后，点击任意按钮打开弹窗时都会显示空白输入框，完美实现单个弹窗的复用。

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