Question

单击tr时，尝试在我的表格中切换一些tr。我已经编写了代码，但它似乎无法正常工作 enter image description here

它最初是用php编写的，但是我的php代码非常混乱，所以我认为捕获输出会有助于组织事物。

所以我想要发生的事情就是当我点击folder1时，我需要显示folderContent1。

jQuery出于某种原因并不适用于此。

jQuery有问题还是我必须显示我的php代码？

编辑。

        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Secure Login: Protected Page</title>
        <script type="text/Javascript" src="js/jQuery-1.7.js"></script>
        <link rel="stylesheet" href="styles/main.css" />
    </head>
    <body>

            <p>Welcome joshbarber89!</p>
            <p>
                <table>
                    <tr>
                        <td>Admin Tools:</td>
                    </tr>
                    <tr>
                        <td>Register a user <a href='register.php'>here</a></td>
                    </tr>
                    <tr>
                        <td>Edit/Delete user <a href='editList.php'>here</a></td>
                    </tr>
                    </table>
                    <br/>
                    <table>
                    <tr>
                        <td>Create new folder <a href='createFolder.php'>here</a></td>
                    </tr>
                    <tr>
                        <td>Add <a href='add_content.php'>content</a></td>
                    </tr>
                    </table>

                    <p> Content: </p>
                        <table id='content'>
                        <tr>
                        <td width='50'></td><td>Folder Name</td><td>Tools</td><tr id='folder1'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>a</td></td><td><a href='edit_folder.php?id=1'>Edit</a> <a href='delete_folder.php?id=1'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>a</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=24'>Edit</a> <a href='delete_content.php?id=24'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>stuff in a</td><td width = '100'><a href=uploads/Interprovincial%20-%20Territorial%20Protocol%20%5B02-Apr-2002%5D.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=25'>Edit</a> <a href='delete_content.php?id=25'>Remove</a></td></tr><tr id='folder2'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>blah</td></td><td><a href='edit_folder.php?id=2'>Edit</a> <a href='delete_folder.php?id=2'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>stuff</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=22'>Edit</a> <a href='delete_content.php?id=22'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>asdasdasd</td><td width = '100'><a href=uploads/sbcon_admin.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=23'>Edit</a> <a href='delete_content.php?id=23'>Remove</a></td></tr></table>
                <script>
                    $(document).ready(function(){
                        var count = $('#content tr').length;
                        for(var i = 0; i< count; i++)
                        {
                            $('.folderContent'+i).hide();
                            $('#folder'+i).click(function(){

                                $('.folderContent'+i).toggle();
                            });
                        }
                    });
                </script>               
                <p>If you are done, please <a href="includes/logout.php">log out</a>.</p>
            </p>
            <p>Return to <a href="login.php">login page</a></p>
            </body>
</html>

控制台中没有错误

Answer 1

你正在遇到一个带闭包的常见问题。当单击处理程序被调用时i = count，所以所有按钮单击处理程序将切换最后一个元素。

您可以通过将循环体包装在一个立即调用的函数中来解决此问题。

for(var i = 0; i < count; i++) {
  (function(i) {
    $('.folderContent'+i).hide();
    $('#folder'+i).click(function() {
      $('.folderContent'+i).show();
    });
  })(i);
}

Answer 2

在这些情况下我喜欢做的是调试每一步在你的js中放置alert或console.log来检查它是否运行。

$(document).ready(function(){
    var count = $('#content tr').length;
    for(var i = 0; i< count; i++)
    {
        console.log('inside loop ' + i);
        $('.folderContent'+i).hide();
        $('#folder'+i).click(function(){
            console.log('clicked on row');
            console.log(this);
            $('.folderContent'+i).toggle();
        });
    }
});

另外，我不会把我放在点击功能中。最好从你点击的元素中获取id。

<强>更新

Thad建议获得Id的最佳方式。按如下方式创建tr

> <tr id='folder1' data-child-id='1'></tr>

点击事件更新。

$('#folder'+i).click(function(){
    var childId = $(this).data('child-id');
    $('.folderContent'+ childId ).toggle();
});

Answer 3

有很多方法可以做到这一点，但我会给你一个快速的例子，告诉你如何去做，假设你可以有不同数量的孩子。

这是一个jsfiddle：http://jsfiddle.net/cpsmLayL/

使用数据属性，我们可以添加自定义数据，将一个父项与多个子项配对，并根据该属性进行切换。对于每个父tr，我们添加data-show-child="{parentnumber}"，然后为该父项的每个子项添加类child-{parentnumber}。

我知道这个例子有点草率，但它给你一个大致的想法。

这是另一个使用tbody来包装父母和孩子的例子。我想我更喜欢它。

http://jsfiddle.net/cpsmLayL/1/

Answer 4

另一种解决方案可能是使用像这样的个人属性

<table>
    <tr data-id="1" ... ></tr>
    <tr data-parent-id="1" ... ></tr>
    <tr data-parent-id="1" ... ></tr>
    <tr data-id="2" ... ></tr>
    <tr data-parent-id="2" ... ></tr>
    <tr data-parent-id="2" ... ></tr>
</table>
<script type="text/javascript">
    $('tr[data-id]').click(function(){
        var id = $(this).attr('data-id');
        $('tr[data-parent-id="'+id+'"]').toggle();
    });
</script>

我想这更干净，更快

Answer 5

一种更好的方法，可以按预期使用属性来指出内容的索引：

http://jsfiddle.net/x2x0rguj/

HTML：

<table id='content'>
    <tbody>
        <tr class="folder" index="1">
            <td>folder1</td>
        </tr>
        <tr class="folderContent1">
            <td>content</td>
        </tr>
        <tr class="folderContent1">
            <td>content</td>
        </tr>
        <tr class="folder" index="2">
            <td>folder2</td>
        </tr>
        <tr class="folderContent2">
            <td>content</td>
        </tr>
        <tr class="folderContent2">
            <td>content</td>
        </tr>
    </tbody>
</table>

JS：

$(document).ready(function () {
     var count = $('#content tr').length;
     for (var i = 0; i < count; i++) {
         $('.folderContent' + i).hide();

     }

     $('.folder').click(function () {
         $('.folderContent' + $(this).attr("index")).toggle();
     });
 });

jQuery在表中切换tr

5 个答案: