한 번에 요소 표시 jquery

html과 jquery를 사용하여 간단한 테이블을 만들려고합니다. 내가 찾고있는 것은 먼저이 경우 엘리먼트 중 하나를 숨기는 것입니다. 엘리먼트 "노트"입니다. jquery를 사용하여 각 유형의 동물을 클릭해야하고 한 번 클릭하면 각 동물의 노트를 한 번에 하나씩 보여야합니다. 나는 또한 해냈다. 내 질문은 - 숨겨진 "메모"를 한 번에 하나씩 보여주기 위해 각 유형의 동물에 대해 수업을 할당했습니다. OK는 작동하지만 더 효율적인 방법이라고 생각하지 않습니다. 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가 될 수 있습니다. 클릭 할 때만 요소를 참조하기 때문에 클래스는별로 유용하지 않습니다. DOM 트리 전체가 이동하지 않으므로 ID 찾기가 클래스보다 빠릅니다. 또한

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

, 오히려 그 사용하여 jQuery를 자체를 HTML에 백 개 <td>의를 생성 (그리고 긴 보이게) 방금 생성,보다 같이 대한

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

출처

2017-03-18 13:07:53

(var에 나는 = 0; 나는 100 < ; i ++) { $ ('. clickable'+ tempCharacter ++). 클릭 (YOUR_FUNCTION_HERE); }하지만 각 유형의 동물에 대한 수업을 특성화해야합니다. –

한 번에 요소 표시 jquery

답변

관련 문제