javascript - 根据当前显示显示/隐藏 div 的多个按钮

Question

对于 JavaScript 来说是全新的，我正在尝试将其实现为学校评估网站的一部分。

我想要做的是，使用多个按钮来更改 div 的显示样式。我遇到麻烦的部分是让我的函数要么保持打开状态(style.display = block)，如果最后按下一个不同的按钮，要么关闭(style.display = none)如果它与上一页。

这背后的原因是下一步将实现一些 AJAX 以根据相同的按钮将不同的内容调用到 div 中。只是想先了解基础知识。 (学习练习)

    function toggle_visibility(caller) {
    var e = document.getElementById('hidden');
    var current;
    if(caller == current){
        e.style.display = 'none';
        current = 'none';
    }else{
        e.style.display = 'block';
        current = caller;
    }

这就是我的脚本，按钮本身只是用不同的“调用者”调用上面的脚本:

<button onClick="toggle_visibility('Button1')">Button1</button>
<button onClick="toggle_visibility('Button2')">Button2</button>
<button onClick="toggle_visibility('Button3')">Button3</button>

我做错了什么或遗漏了什么？谢谢。

Answer 1

变量“current”的作用域为函数toggle_visibility。每次单击按钮并调用函数时，都会重新创建“当前”变量。

您需要移动“var current;”的声明在函数toggle_visibility 之外。

准备好后，请阅读以下内容以了解详细信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope