一次显示元素jquery答案

【问题标题】：show element at a time jquery一次显示元素jquery
【发布时间】：2017-03-18 13:02:44
【问题描述】：

我正在尝试使用 html 和 jquery 做一个简单的表格。我正在寻找的是首先隐藏在这种情况下的元素之一是元素“注释”，我已经完成了。然后使用 jquery 我需要点击每种类型的动物，一旦点击必须显示每种动物的笔记，一次一个。我也做过。我的问题是 - 一次显示一个隐藏的“笔记”，我为每种类型的动物归类了一个类 - 好的，它正在工作，但我认为这不是更有效的方法，因为如果我有100 种动物为每种动物分配一个类是浪费时间。

有人可以帮我吗？这是我的代码：

<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

【问题讨论】：

标签： jquery html show hidden

【解决方案1】：

您也可以参考：GetElementByID - Multiple IDs

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

您可以保留一个变量（比如 tempCharacter='1'）并在循环中使用它，而不是执行上述操作，如下所示。 “可点击”在这里可以是一个 ID，而不是一个类。由于您仅在单击时指代元素，因此类不会有太大用处。 此外，定位 ID 将比类更快，因为不会遍历整个 DOM 树。

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

另外，与其在 HTML 中创建数百个 <td> （并让它看起来很长），不如使用 jQuery 本身创建那些：

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

【讨论】：

for(var i=0;i