绑定切换按钮onClick到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中的OnClickcorrect1和correct2 id都在改变背景色。我尝试使用此代码来实现它，只有相应的Button开关起作用。

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';

    }
}

查看更新的小提琴

Answer 2

我建议在这样的函数中也传递正确的答案ID：

function toggle(id, ans) {
    var e = document.getElementById(id);
    if (e.style.display == 'none') {
        e.style.display = 'block';
        document.getElementById(ans).style.backgroundColor = '#BCF5A9';
    } else {
        e.style.display = 'none';
        document.getElementById(ans).style.backgroundColor = '#FFFFFF';
   }
}

检查小提琴： http : //jsfiddle.net/sLHKq/2/