Question

我是网络编程的新手。所以我修改了一个我在网上找到的代码并最终得到了这样的结果：jsfiddle.net/y4Mdy/673女巫工作正常，表中的所有标题行都显示出来，其他标题行被隐藏，然后可以通过单击标题来显示。

但是当我试图将html，CSS和JavaScript组合在一起时（遵循找到的here指令）它似乎不起作用。当我点击标题没有任何反应时，其他行不会显示。这是我的html文件的内容：

<html>
    <head>
        <script type="text/javascript">
            $('.header').click(function () {
                $(this).find('span').text(function (_, value) {
                    return value == '-' ? '+' : '-'
                });
                $(this).nextUntil('tr.header').slideToggle(100, function () {});
            });
         </script>.
        <style>
            table, tr, td, th {
                border-collapse:collapse;
            }
            tr {
                display: none;
            }
            table {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            tr.header {
                cursor:pointer;
                display: table-row;
            }
        </style>.
    </head>
    <body>
        <table>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>date</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </body>
</html>

Answer 1

Import jquery library first

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 2

您在代码中使用jQuery，但忘记包含jquery文件！

在你的html中添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Answer 3

您希望首先加载jQuery，就像其他人所说的那样，并且您可能还希望将代码放在“ready”函数中，因为您在页面顶部运行代码。这样，您可以确保在代码运行之前加载整个页面。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
           $( document ).ready(function() {
            // Handler for .ready() called.
            $('.header').click(function () {
                $(this).find('span').text(function (_, value) {
                    return value == '-' ? '+' : '-'
                });
                $(this).nextUntil('tr.header').slideToggle(100, function () {});
            });
          });
         </script>.
        <style>
            table, tr, td, th {
                border-collapse:collapse;
            }
            tr {
                display: none;
            }
            table {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            tr.header {
                cursor:pointer;
                display: table-row;
            }
        </style>.
    </head>
    <body>
        <table>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>date</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </body>
</html>

在此处查看信息： http://api.jquery.com/ready/

另外，请记住，在上面的示例中，您将从Internet加载jQuery。您可能希望在本地下载并从本地目录中加载它，具体取决于您的具体情况。但是，就你的目的而言，只要你有互联网连接，你就可以通过互联网连接来做到这一点。

在HTML代码中注入CSS和JavaScript

3 个答案: