DOM对象的选择，做一个选择题的JS
一个div里有多个text，然后text里又有input，所以我要先选中text判断是第几题，如果任何一个input被点击，那么先前隐藏的answer就会block。现在我的问题怎么分别选中text里的input。 dom js 选择题
[解决办法]
window.onload=function(){
var oText=oDiv.getElementsByClassName("text");
var?oAn=document.getElementsByClassName("anwser");
for(var i=0;i<oAn.length;i++){
oAn[i].onclick = function(){
for(var j=0;j<oText.length;j++){
oText[i].style.display='none';
}
this. previousSibling.style.display='block';
}
}
}
大致这样 语法有点王忘记了
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{ width:500px; height:auto; background:#A2D0FF;}
.text{ height:100px; background:#0C3; width:500px;}
.anwser{ height:100px; background:#CF6; width:500px; display:none;}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oText=oDiv.getElementsByClassName("text");
var oAn=document.getElementsByClassName("anwser");
var index=0;
var select_arr
for(var i=0;i<oText.length;i++){
select_arr=oText[i].getElementsByTagName("input");
for(var j=0;j<select_arr.length;j++){
select_arr[j].onclick=function(){
for(var i=0;i<oText.length;i++){
if(oText[i]==this.parentNode){
index=i;
}
}
oAn[index].style.display="block";
}
}
}
}
</script>
<body>
<div id="div1"><p>This is the first question description.</p>
<div class="text">
A.one<input type="radio"/>
B.two<input type="radio"/>
C.three<input type="radio"/>
D.four<input type="radio"/>
</div>
<div class="anwser">This is the answer.</div>
<p>This is the first question description.</p>
<div class="text">
A.one<input type="radio"/>
B.two<input type="radio"/>
C.three<input type="radio"/>
D.four<input type="radio"/>
</div>
<div class="anwser">This is the answer.</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{ width:500px; height:auto; background:#A2D0FF;}
.text{ height:100px; background:#0C3; width:500px;}
.anwser{ height:100px; background:#CF6; width:500px; display:none;}
</style>
<body onload="init()">
<div id="div1">
<p>This is the first question description.</p>
<div id='1' class="text">
A.one<input id='a' type="radio"/>
B.two<input id='b' type="radio"/>
C.three<input id='c' type="radio"/>
D.four<input id='d' type="radio"/>
</div>
<div id='1' class="anwser">This is the answer.</div>
<p>This is the first question description.</p>
<div id='2' class="text">
A.one<input id='a' type="radio"/>
B.two<input id='b' type="radio"/>
C.three<input id='c' type="radio"/>
D.four<input id='d' type="radio"/>
</div>
<div id="2" class="anwser">This is the answer.</div>
</div>
</body>
<script>
var oDiv=document.getElementById("div1");
var textList = oDiv.getElementsByClassName('text');
var showList = oDiv.getElementsByClassName('anwser');
//注册事件
function init(){
f2();
}
//隐藏所有answer和清除当前所选
function noneText(checkDivID){
for(var i=0;i<textList.length;i++){
showList[i].name=showList[i].style.display='none';
}
if(checkDivID){
var text = textList[checkDivID].getElementsByTagName('input');
for(var i = 0;i < text.length;i++){
text[i].checked=false;
}
}
}
//注册点击事件
function f2() {
var d = oDiv;
d.onclick = function(e) {
var e = e
[解决办法]
window.event;
var target = e.srcElement
[解决办法]
e.target;
if (target.type == 'radio' && target.parentElement.id!='') {
//获取点击事件题目id
var id = target.parentElement.id-1;
noneText(id);
//添加所选选项
textList[id].getElementsByTagName('input')[target.id].checked = true;
//显示题目答案
var showText = showList[id];
showText.name=showText.style.display='block';
}
}
}
</script>
</html>
