show element at a time jquery

Question

I am trying to do a simple table using html and jquery. What I am looking for is first of all hide one of the elements in this case is the element "notes", which I have done already. then using jquery I need to click in each type of animal and once clicked has to show the notes of each animal,one at a time. Which I have also done. My question is - to show the hidden "notes"one at a time, I have attributed a class for each type of animal - OK it is working but I do not think it is the more efficient way of doing it, because if I have 100 types of animals would be a waste of time attribute a class for each type of animal.

Can someone help me with that? here is my code:

<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

score 0 · Answer 1 · edited May 23 '17 at 12:09

You could also refer: GetElementByID - Multiple IDs

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

Instead of doing the above, you can keep a variable (say tempCharacter='1') and use it in a loop as below. "clickable" can be an ID here, instead of a class. As you're referring to the element only upon being clicked, a class won't be of much use. Further, locating an ID will be faster than a class as the entire DOM tree won't be traversed.

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

Also, rather than creating hundred <td> s in HTML (and make it look long), just create those using jQuery itself as:

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

for(var i=0;i<100;i++){ $('.clickable'+tempCharacter++).click( YOUR_FUNCTION_HERE); } but I still have to attribute a class for each type of animal dont I? — Diana Madeira, Mar 18 '17 at 13:19

show element at a time jquery

1 Answers1