Question

我是javascript的新手，我正试图用它来切换几个元素的显示。我编写了一个脚本来切换单个元素，但我的实际站点在几个不同的页面上包含几个元素，所以我想写一个我可以在许多不同元素上重用的函数。

示例页面可能是：

<html>
<head>
<title>Some | Page</title>
</head>
<body>
<h1 id="pepper" onclick="changeDisplay('greendiv')">Click Here</h1>
<div id="greendiv" style="height:200px; width:200px"></div>
<script type="text/javascript">
function changeDisplay('id') {
        var styleState = document.getElementById('id');
    var divState = document.getComputedStyle('id').display;
    if (divState == 'none') {
        styleState.style.display = 'block';
    } else if (divState == 'block') {
        styleState.style.display = 'none';
    } else {
        alert("Error");
    }
}
</script>

</body>
</html>

仅在实际网站上，我对包含<head>标记中的代码的外部脚本文件进行了引用，因此我可以在许多页面上使用相同的脚本。如果代码中不明显，我的意图是能够点击<h1>标记以使<div>消失并重新出现。我不知道jQuery，虽然我最近得到了一本关于它的书，我还没有时间开始阅读，但我敢打赌它会让它变得更加简单。

我想这是非常简单的东西，总是那些让我失望的简单东西......

如果有人能解释我的代码中的错误，我会真的欣赏它。

糟糕，遗漏了实际问题：代码没有做任何事情。当我点击<h1>元素时，没有任何反应，甚至没有警报框。

Answer 1

（添加正确的答案，而不是留下评论）

1）changeDisplay('id')应为changeDisplay(id)。变量周围没有任何引号。 document.getElementById

也是如此

2）divState应该等于styleState.style.display。

Answer 2

jQuery使这很简单：

http://api.jquery.com/toggle/

可重用的JavaScript切换功能

2 个答案: