如何仅用JavaScript实现点击对应按钮时显示/隐藏多个div

核心错误原因 #

1. showHide函数未接收参数，且直接使用未定义的idAnswer变量——你调用时传了选择器字符串，但函数里没将其转为实际DOM元素
2. block、none是CSS关键字，需加引号作为字符串使用，否则会被识别为未定义变量
3. 循环里的idIcon、idAnswer只是字符串选择器，不是真实DOM元素，必须先获取对应元素才能操作

修正后的代码 #

const buttonList = document.querySelectorAll('.button');
const imgArray = ["assets/images/icon-minus.svg", "assets/images/icon-plus.svg"];

// 显示隐藏函数：接收对应answer元素作为参数
function showHide(answerEl) {
    if (answerEl.style.display === "none") {
        answerEl.style.display = "block";
    } else {
        answerEl.style.display = "none";
    }
}

// 切换图片函数：接收对应icon元素作为参数
function changeImgSource(iconEl) {
    if (iconEl.src.includes(imgArray[0])) {
        iconEl.src = imgArray[1];
    } else {
        iconEl.src = imgArray[0];
    }
}

// 绑定点击事件
for (let count = 0; count < buttonList.length; count++) {
    const button = buttonList[count];
    // 从按钮类名提取数字后缀，比如button_0提取0
    const suffix = button.classList[1].split('_')[1];
    // 获取对应的answer和icon DOM元素
    const answerEl = document.getElementById(`answer_${suffix}`);
    const iconEl = document.getElementById(`icon_${suffix}`);

    button.onclick = function () {
        showHide(answerEl);
        changeImgSource(iconEl);
    }
}

关键调整说明 #

• 给两个操作函数添加参数，直接传入DOM元素，避免字符串选择器的混乱
• 用split('_')[1]提取类名里的数字后缀，拼接ID时更稳妥
• 给block、none加上引号，确保是合法的CSS字符串值
• 用includes替代match判断图片路径，逻辑更简单直观
• 换成for循环，符合新手的阅读习惯

另外建议初始状态给所有answer_*元素设置display: none的CSS样式，让页面加载时默认隐藏，点击按钮再触发显示切换。

内容的提问来源于stack exchange，提问作者Igor Guimarães