Javascript 无法显示具有相同类名的特定答案
我想创建一个有多项选择题的网站，并在点击正确答案时显示结果是否正确。Javascript 无法显示具有相同类名的特定答案,javascript,jquery,html,dom,xhtml,Javascript,Jquery,Html,Dom,Xhtml,我想创建一个有多项选择题的网站，并在点击正确答案时显示结果是否正确。 我被代码困住了，它显示了所有的元素，因为我给所有类赋予了相同的名称 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $(".img1").hide(); $("
我被代码困住了，它显示了所有的元素，因为我给所有类赋予了相同的名称
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".img1").hide();
$(".show1").click(function(){
$(".img1").show();
});
});
</script>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
background-color:#eeeeee;
height:160px;
width:100px;
float:left;
padding:5px;
}
#section {
width:800px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div style="width:960px; height:80px; background-color:#3b5998">
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div id="section">
<div>
<table style="width:100%">
<tr>
<td colspan="3"><p>A train running at the speed of 60 km/hr crosses a pole in 9 seconds. What is the length of the train?</p></td>
</tr>
<tr>
<td><a href="#" class="show1" style="text-decoration:none"><strong>A.</strong> 120 </a> <a href="#" class="img1"><img src= "images/logo/correct.png" width="14" height="14" /></a> </td>
<td><a href="#" class="show1" style="text-decoration:none" ><strong><strong>B.</strong> 180
</a> <a href="#" class="img1"><img src= "images/logo/wrong.png" width="14" height="14" /></a> </td>
</tr>
<tr>
<td><a href="#" class="show1" style="text-decoration:none" ><strong>C.</strong> 324
</a> <a href="#" class="img1"><img src= "images/logo/wrong.png" width="14" height="14" /></a> </td>
<td><a href="#" id="show1" style="text-decoration:none" ><strong>D.</strong> 150
</a> <a href="#" class="img1"><img src= "images/logo/wrong.png" width="14" height="14" /></a> </td>
</tr>
</table>
<table style="width:100%">
<tr>
<td colspan="3"><p>A train running at the speed of 60 km/hr crosses a pole in 9 seconds. What is the length of the train?</p></td>
</tr>
<tr>
<td>
<a href="#" id="show1" style="text-decoration:none"><strong>A.</strong> 120 </a> <a href="#" class="img1"><img src= "images/logo/correct.png" width="14" height="14"/></a> </td>
<td><a href="#" id="show1" style="text-decoration:none" ><strong><strong>B.</strong> 180
</a> <a href="#" class="img1"><img src= "images/logo/wrong.png" width="14" height="14" /></a> </td>
</tr>
<tr>
<td><a href="#" id="show1" style="text-decoration:none" ><strong>C.</strong> 324
</a> <a href="#" class="img1"><img src= "images/logo/wrong.png" width="14" height="14" /></a> </td>
<td><a href="#" id="show1" style="text-decoration:none" ><strong>D.</strong> 150
</a> <a href="#" class="img1"><img src= "images/logo/wrong.png" width="14" height="14" /></a> </td>
</tr>
</table>
</div>
`enter code here`</div>
<div id="footer">
$（文档）.ready（函数（）{
$（“.img1”）.hide（）；
$（“.show1”）。单击（函数（）{
$（“.img1”）.show（）；
});
});
#标题{
背景色：黑色；
颜色：白色；
文本对齐：居中；
填充物：5px；
}
#导航{
背景色：#eeeeee；
高度：160px；
宽度：100px；
浮动：左；
填充物：5px；
}
#部分{
宽度：800px；
浮动：左；
填充：10px；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}
城市画廊
伦敦
巴黎
东京
一列以60公里/小时的速度行驶的列车在9秒内横穿一根杆子。火车的长度是多少
一列以60公里/小时的速度行驶的列车在9秒内横穿一根杆子。火车的长度是多少
`在这里输入代码`
.next（）“show1”id$（文档）.ready（函数（）{
$（“.img1”）.hide（）；
$（“.show1”）。单击（函数（）{
$（this.next（“.img1”）.show（）；
});
})
#标题{
背景色：黑色；
颜色：白色；
文本对齐：居中；
填充物：5px；
}
#导航{
背景色：#eeeeee；
高度：160px；
宽度：100px；
浮动：左；
填充物：5px；
}
#部分{
宽度：800px；
浮动：左；
填充：10px；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}
城市画廊
伦敦
巴黎
东京
一列以60公里/小时的速度行驶的列车在9秒内横穿一根杆子。火车的长度是多少
一列以60公里/小时的速度行驶的列车在9秒内横穿一根杆子。火车的长度是多少
`在这里输入代码`