Question

从以前的主题我已经使用了以下代码。

查看

<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如下OnClick correct1和两个div中的correct2 id＆＃39; s正在改变背景颜色。我尝试使用此代码来实现它只有相应的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';

    }
}

查看更新的Fiddle

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/

绑定切换按钮onClick到div

2 个答案: