javascript - 将切换按钮 onClick 绑定(bind)到 div

Question

在之前的线程中，我使用了以下代码。

当前代码可在 http://jsfiddle.net/sLHKq/ 处查看

<div id="question1">
<ol>
<li id="correct1">A1</li>
<li id="">A2</li>
</ol>
<div id="answer1" style="display:none;"></div>
<button onclick="toggle('answer1');">Button 1</button>
</div>
<hr>
<div id="question2">
<ol>
<li id="">B1</li>
<li id="correct2">B2</li>
</ol>
<div id="answer2" style="display:none;"></div>
</div>
<button onclick="toggle('answer2');">Button 2</button>

我使用的 Javascript 如下，两个 div 中的 OnClick Correct1 和 Correct2 id 都在更改背景颜色。我尝试使用此代码来实现它，以便仅相应按钮的切换才能工作。

function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct1").style.backgroundColor = '#BCF5A9';
document.getElementById("correct2").style.backgroundColor = '#BCF5A9';

} else {
e.style.display = 'none';
document.getElementById("correct1").style.backgroundColor = '#FFFFFF';
document.getElementById("correct2").style.backgroundColor = '#FFFFFF';

}
}

如何将 onclick 和背景颜色更改限制为仅问题的按钮 div ？

Answer 1

你的意思是:

function toggle(id) {
    var e = document.getElementById("answer" + id);
    if (e.style.display == 'none') {
        e.style.display = 'block';
        document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
        document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';

    } else {
        e.style.display = 'none';
        document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
        document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';

    }
}

查看更新Fiddle