顯示元素一次jquery

我想做一個簡單的表使用HTML和jQuery。首先我要找的是隱藏在這種情況下的元素之一是元素「筆記」，我已經完成了。然後使用jQuery我需要點擊每種類型的動物，一旦點擊就必須一次顯示每隻動物的註釋。我也做了。我的問題是 - 爲了一次一個地顯示隱藏的「筆記」，我將每類動物歸類爲一個類 - 確定它正在工作，但我認爲這不是更有效的方法，因爲如果我有對於每種類型的動物，100種動物會浪費時間來歸類。顯示元素一次jquery

有人可以幫我嗎？這裏是我的代碼：

<title> jQuery exercise</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <style> 


    table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
} 
     .clickable1,.clickable2 { 
      cursor:pointer; 
      text-decoration: none; 
     } 

    </style> 
</head> 

<body> 


    <table id="tableID"> 
     <tbody> 
    <tr > 

    <th> Animal</th> 
     <td class="clickable1">Cat</td> 
     <td class="clickable2"> Dog</td> 
    </tr> 

     <tr> 
      <th> Notes</th> 
     <td class="toggle"> A</td> 
     <td class="toggle2"> C</td> 
     </tr> 
     </tbody> 
    </table> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.toggle,.toggle2').hide(); 
}); 
    $(document).ready(function(){ 
      $('.clickable1').click(function(){ 
            $('.toggle').toggle(250); 
            }); 
         }); 
     $(document).ready(function(){ 
      $('.clickable2').click(function(){ 
            $('.toggle2').toggle(250); 
            }); 
         }); 
</script>  
</body> 


</html> 
Many thanks

來源

2017-03-18 Diana Madeira

你也可以參考：GetElementByID - Multiple IDs

$(document).ready(function(){ 
       $('.clickable1').click(function(){ 
             $('.toggle').toggle(250); 
             }); 
          }); 
      $(document).ready(function(){ 
       $('.clickable2').click(function(){ 
             $('.toggle2').toggle(250); 
             }); 
          });

而不是做上述情況，你可以保持一個變量（比如tempCharacter = '1'），並用它如下所示。「clickable」可以是一個ID，而不是一個類。由於您僅在被點擊時指向元素，所以類不會有太大的用處。 此外，定位一個ID將比一個類更快，因爲整個DOM樹不會被遍歷。

for(var i=0;i<100;i++){ 
     $('#clickable'+tempCharacter++).click(function(){ 
      //Your function code here 
     }); 
    }

另外，而不是在HTML創建百個<td> S（並使它看起來長），只是創建使用jQuery本身的那些：

$("#tableID").append("<td "+id_name +">"+ text + "</td>");

來源

2017-03-18 13:07:53

爲（VAR I = 0; I <100 ; i ++）{（'。clickable'+ tempCharacter ++）。click（YOUR_FUNCTION_HERE）; }但我仍然必須爲每種類型的動物歸類一個類別嗎？ –

顯示元素一次jquery

回答

相關問題