Question

我正在尝试使用html和jquery做一个简单的表。我正在寻找的是首先隐藏在这种情况下的一个元素是元素＆＃34; notes＆＃34;，我已经完成了。然后使用jquery我需要点击每种类型的动物，一旦点击就必须一次显示每只动物的音符。我也做了。我的问题是 - 一次显示隐藏的＆＃34;注释＆＃34;我已经为每种类型的动物归结了一个类 - 好吧它正在工作但我不认为这是更有效的方法，因为如果我有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

Answer 1

您还可以参考：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>（并使其看起来很长），而是使用jQuery本身创建它们：

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

一次显示元素jquery

1 个答案: