jQuery代码工作在jfiddle上，但不是在我的电脑上？

-2

我试图让这个小提琴工作，Here's a link to the fiddle jQuery代码工作在jfiddle上，但不是在我的电脑上？

我已经将它复制到一个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>

来源

2014-09-19 rockyraw

的DOM在读你的click处理器（引用的HTML元素还不存在）未完全加载。

使用DOM就绪事件处理程序函数来确保DOM已完全加载，从而确保在读取函数之前存在所有HTML元素。

$(document).ready(function() { 

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

});

参见：http://api.jquery.com/ready/

它的工作中的jsfiddle，因为自动的jsfiddle处理此为您服务。请注意框架&下的onload选项位于左侧窗格中。

来源

2014-09-19 18:47:35 Sparky

JSFiddle方便地为您添加$(document).ready()。但是，您的本地示例不会，因此代码在DOM实际加载之前执行。为了解决这个问题，包装jQuery代码在文档准备功能：

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

来源

2014-09-19 18:47:20 Charlie

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

来源

2014-09-19 18:48:11 AvrilAlejandro

jQuery代码工作在jfiddle上，但不是在我的电脑上？

回答

相关问题