jquery code работает на jfiddle, но не на моем компьютере?

-2

Я пытаюсь заставить эту скрипту работать, Here's a link to the fiddle jquery code работает на 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

The DOM не полностью загружается при click обработчик для чтения (ссылочные 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 автоматически обрабатывает это для вас. Обратите внимание на параметр 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 code работает на jfiddle, но не на моем компьютере?

ответ

Смежные вопросы