1. 首頁
  2. 問答
  3. 無法用同一個類名顯示具體答案

無法用同一個類名顯示具體答案

2015-12-28 64 views
-1

我想創建一個網站，其中有多個選擇題，並在正確答案上單擊時顯示結果扭曲或錯誤。
我被代碼卡住了，它顯示了所有的元素，因爲我已經給所有類同名。無法用同一個類名顯示具體答案

<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">

來源

2015-12-28 Vikas

+0

你真的有問題嗎？ –

+0

您正在使用ID「＃show1」_four_次。 ID必須是唯一的=僅在文檔中使用一次。改變...... – Johannes

回答

0

嘗試重複"show1"id小號代class，使用.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">

來源

2015-12-28 00:55:04 guest271314

相關問題

 相關問題