画像が表示されるようにこのコードを修正するにはどうすればよいですか。ラジオ ボタンがあった場所には表示されません。さまざまな機会にいくつかの異なる方法を試しましたが、これが最も有望なようですが、画像を本来あるべき場所に表示することはできません. これが何回回答されたかは言わないでください。私が何回回答を試みたかわからないからです。JavaScriptを使用してラジオボタンの代わりに画像を取得する方法を教えてください。例としてjsfiddleを使用してください。ラベルがないかもしれませんが、どこに置くべきかわかりません。 http://jsfiddle.net/uuyAq/
<!DOCTYPE html>
<html>
<head>
<script>
var images = {
1: 'http://wepriceit.webs.com/ipad-5-image.jpg',
2: 'http://wepriceit.webs.com/ipad-5-image.jpg',
3: 'http://wepriceit.webs.com/ipad-5-image.jpg',
4: 'http://wepriceit.webs.com/ipad-5-image.jpg',
5: 'http://wepriceit.webs.com/ipad-5-image.jpg'
};
$('input[type=radio][name^=question]').each(function() {
var id = this.id;
$(this)
.hide() // hide the radio button
.after('<img src="'+ images[id] +'">'); // insert the image
// after corresponding radio
});
</script>
</head>
<body>
<script>
function tryToMakeLink()
{
//get all selected radios
var q1=document.querySelector('input[name="q1"]:checked');
var q2=document.querySelector('input[name="q2"]:checked');
var q3=document.querySelector('input[name="q3"]:checked');
//make sure the user has selected all 3
if (q1==null || q2==null ||q3==null)
{
document.getElementById("linkDiv").innerHTML="<input type=button
disabled=disabled value=Next>";
}
else
{
//now we know we have 3 radios, so get their values
q1=q1.value;
q2=q2.value;
q3=q3.value;
//now check the values to display a different link for the desired
configuration
if (q1=="AT&T" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://google.com/';\">att 8gb black</input>";
}
else if (q1=="Other" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://yahoo.com/';\">other 8b white</input>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://bing.com/';\">another option</input>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
}
else if (q1=="AT&T" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
}
else if (q1=="Other" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://images.google.com/';\">yours</input>";
}
else if (q1=="Other" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://youtube.com/';\">mines</input>";
}
else if (q1=="Other" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://docs.google.com/';\">what</input>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
}
}
}
</script>
<form name="quiz" id='quiz'>
What carrier do you have?
<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q1" value="AT&T" id="1"/>AT&T</li><label for="1"/>
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q1" value="Other" id="2"/>Other</li><label for="2"/>
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q1" value="Unlocked" id="3"/>Unlocked</li><label for="3"/>
</ul>
What is your phones capicity?
<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q2" value="8GB" id="4"/>8GB</li><label for="4"/>
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q2" value="16GB" id="5"/>16GB</li><label for="5"/>
</ul>
What color is your phone?
<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q3" value="Black" id="6"/>Black</li><label for="6"/>
<li style="list-style: none;"><input type="radio" onclick=tryToMakeLink();
name="q3" value="White" id="7"/>White</li><label for="7"/>
</ul>
<br>
<div id=linkDiv>
<input type=button disabled=disabled value=Next>
</div>
</form>
</body>
</html>