在jquery中一次显示元素_Jquery_Html_Show_Hidden

在jquery中一次显示元素

jquery html

在jquery中一次显示元素,jquery,html,show,hidden,Jquery,Html,Show,Hidden,我正在尝试使用html和jquery创建一个简单的表。我要找的是首先隐藏一个元素，在这个例子中是元素“notes”，我已经做过了。然后使用jquery，我需要在每种动物中单击，单击后必须显示每种动物的注释，一次一个。我也这样做了。我的问题是——为了一次一个地显示隐藏的“注释”，我为每种类型的动物指定了一个类——好的，但我不认为这是更有效的方法，因为如果我有100种类型的动物，那么为每种类型的动物指定一个类将是浪费时间有人能帮我吗？这是我的密码： jQuery练习桌子{ 字体系列：aria

我正在尝试使用html和jquery创建一个简单的表。我要找的是首先隐藏一个元素，在这个例子中是元素“notes”，我已经做过了。然后使用jquery，我需要在每种动物中单击，单击后必须显示每种动物的注释，一次一个。我也这样做了。我的问题是——为了一次一个地显示隐藏的“注释”，我为每种类型的动物指定了一个类——好的，但我不认为这是更有效的方法，因为如果我有100种类型的动物，那么为每种类型的动物指定一个类将是浪费时间

有人能帮我吗？这是我的密码：

jQuery练习
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
td，th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
.可点击1、.可点击2{
光标：指针；
文字装饰：无；
}
动物
猫
狗
笔记
A.
C
$（文档）.ready（函数（）{
$（'.toggle、.toggle2'）.hide（）；
});
$（文档）.ready（函数（）{
$（'.clickable1'）。单击（函数（）{
$（'.toggle'）。toggle（250）；
});
});
$（文档）.ready（函数（）{
$（'.clickable2'）。单击（函数（）{
$（'.toggle2'）。toggle（250）；
});
});
非常感谢

您也可以参考：

您可以保留一个变量（比如tempCharacter='1'）并在循环中使用它，而不是执行上述操作，如下所示。 “clickable”可以是此处的ID，而不是类。由于您仅在单击时才引用元素，因此类没有多大用处。此外，由于不会遍历整个DOM树，因此查找ID将比查找类更快

for（变量i=0；ifor（变量i=0；i
<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 

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

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

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