javascript - 显示: none/block onclick messes up

Question

由于某种原因，我遇到了麻烦，但我似乎不知道如何解决...我正在做一个测验，它以开始按钮开始，并有“下一个”和“上一个”按钮。当我点击开始按钮时，问题 1 和答案 1 将会出现，开始按钮消失，当我然后点击下一步，它正在加载第二个问题，但不是答案2

我的代码:

// Hide / Show actions
function hideStartButton() { document.getElementById("start-button").style.display = "none";}
function showAnswers1() { document.getElementById("answers1").style.display = "block"; }
function hideAnswers1() { document.getElementById("answers1").style.display = "none";  }
function showAnswers2() { document.getElementById("answers2").style.display = "block"; }
function hideAnswers2() { document.getElementById("answers2").style.display = "none";  }

完整代码: http://jsfiddle.net/5jz092cb/

当我不使用 hideAnswer1() 时，它会加载answer2；否则它会显示为空白？

Answer 1

CSS

.hidden {display: none;}

JavaScript

change('answers1','hidden');
change(document.getElementById('answers1'),'hidden');
//etc.

function change(id,c)
{
 if (id_(id)) {id_(id).className = c; if (id_(id).className=='') {id_(id).removeAttribute('class');}}
 else if (id) {id.className = c; if (id.className=='') {id.removeAttribute('class');}}
 else {alert('Error: the class id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+c);}
}

此外在这种情况下，您需要经常同时隐藏和显示图层，因此您很可能需要执行类似< em>循环并隐藏除您想要隐藏的元素之外的所有元素。