无法显示具有相同类名的特定答案答案

【问题标题】：unable to show specific answer with same class name无法显示具有相同类名的特定答案
【发布时间】：2016-04-01 21:12:04
【问题描述】：

我想创建一个包含多项选择题的网站，并在单击正确答案时显示结果是否错误。
我被代码卡住了，它显示了所有元素，因为我给所有类都赋予了相同的名称。

<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> &nbsp; 120 &nbsp;</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> &nbsp; 180  &nbsp; 
    </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> &nbsp; 324  &nbsp; 
    </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> &nbsp; 150 &nbsp; 
    </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> &nbsp; 120 &nbsp;</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> &nbsp; 180  &nbsp; 
    </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> &nbsp; 324  &nbsp; 
    </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> &nbsp; 150 &nbsp; 
    </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">

【问题讨论】：

你真的有问题吗？
您正在使用 ID“#show1”四次次。 ID 必须是唯一的 = 仅在文档中使用一次。改变那个...

标签： javascript jquery html dom xhtml

【解决方案1】：

尝试用 class 替换重复的 "show1" ids ，使用 .next() ；还删除重复的打开<strong>标签

$(document).ready(function() {
  $(".img1").hide();
  $(".show1").click(function() {
    $(this).next(".img1").show();
  });
})

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></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> &nbsp; 120 &nbsp;</a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?0" width="14" height="14" />
              </a>
            </td>




            <td><a href="#" class="show1" style="text-decoration:none"><strong>B.</strong> &nbsp; 180  &nbsp; 
    </a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?1" width="14" height="14" />
              </a>
            </td>

          </tr>
          <tr>

            <td><a href="#" class="show1" style="text-decoration:none"><strong>C.</strong> &nbsp; 324  &nbsp; 
    </a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?2" width="14" height="14" />
              </a>
            </td>


            <td><a href="#" class="show1" style="text-decoration:none"><strong>D.</strong> &nbsp; 150 &nbsp; 
    </a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?3" 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="#" class="show1" style="text-decoration:none"><strong>A.</strong> &nbsp; 120 &nbsp;</a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?4" width="14" height="14" />
              </a>
            </td>

            <td><a href="#" class="show1" style="text-decoration:none"><strong>B.</strong> &nbsp; 180  &nbsp; 
    </a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?5" width="14" height="14" />
              </a>
            </td>

          </tr>
          <tr>

            <td><a href="#" class="show1" style="text-decoration:none"><strong>C.</strong> &nbsp; 324  &nbsp; 
    </a> 
              <a href="#" class="img1">
                <img src="http://lorempixel.com/50/50/?6" width="14" height="14" />
              </a>
            </td>


            <td><a href="#" class="show1" style="text-decoration:none"><strong>D.</strong> &nbsp; 150 &nbsp; 
    </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">

【讨论】：