Question

我正试图让这个小提琴起作用，Here's a link to the fiddle

我已将其复制到html文档中，但它不起作用。那是我的代码，我做错了什么？我错过了一些消息来源吗？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
tr.btn {
    cursor: pointer;
}

table, tr, td {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}
table tr.hidden td .slide {
    display: none;
}
table tr.hidden td {
    height: 0;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$('tr.btn td').click(function(){
    $('tr.hidden .slide').toggle(200)
});
</script>
</head>

<body>
<table border="1">
        <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5asdfasdfasdf</th>
        </tr>
        </thead>
        <tbody>
        <tr class="btn">
            <td colspan="5">Click me</td>
        </tr>
        <tr class="hidden">
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
        </tr>
        <tr class="hidden">
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
        </tr>
        <tr class="hidden">
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
            <td>
                <div class="slide">
                    asd
                </div>
            </td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

JSFiddle方便地为您添加$(document).ready()。但是，您的本地示例没有，因此代码在实际加载DOM之前执行。要解决此问题，请将jQuery代码包装在文档就绪函数中：

$(document).ready(function(){
    ...
}):

Answer 2

读取click处理程序时，DOM未完全加载（引用的HTML元素尚不存在）。

使用DOM ready事件处理函数来确保DOM已完全加载，这可确保在读取函数之前存在所有HTML元素。

$(document).ready(function() {

    $('tr.btn td').click(function(){
        $('tr.hidden .slide').toggle(200)
    });

});

请参阅：http://api.jquery.com/ready/

它在jsFiddle中工作，因为jsFiddle会自动为您处理。请注意Frameworks＆amp;中的onload选项。左侧窗格中的扩展名。

Answer 3

$(document).ready(function(){
    $('tr.btn td').click(function(){
        $('tr.hidden .slide').toggle(200)
    });
})

jquery代码适用于jsfiddle，但不在我的电脑上？

3 个答案: