2012-11-04 58 views
0

我怎樣才能運行此腳本,試圖在HTML文件中運行它,但它似乎並沒有工作..插入的JavaScript中的HTML文件

我想這個代碼是在一個HTML文件,是有可能嗎?或者我需要不同的文件? http://jsfiddle.net/ambiguous/jcnMa/1/

<script type="text/javascript"> 
$('.question, .answer') 
    .css("display", "none"); 
$('.section') 
    .click(function() 
{ 
    var $others = $('.question:visible') 
     .not(this); 
    $others.next('.answer') 
     .hide(); 
    $others.slideToggle(500); 
    $(this) 

     .next('.question') 
     .slideToggle(500); 
}); 
$('.question') 
    .click(function() 
{ 
    $(this) 
     .next('.answer') 
     .slideToggle(500); 
});​ 
</script> 
+1

您是否包含jQuery-Library是否包含在您的jsfiddle中? – Nippey

回答

2

首先在此之前的代碼確保你包括jQuery庫:

<script src="path/to/jquery.min.js"></script> 

確保您不包括這些標籤內的jQuery,所以你有:

<script src="path/to/jquery.min.js"></script> 
<script> 
    /* Your jQuery here */ 
</script> 

然後確保您使用的是$(document).ready(),或者$(window).load(),處理程序:

<script src="path/to/jquery.min.js"></script> 
<script> 
    $(document).ready(
     function(){ 
      /* Your jQuery here */ 
     }); 
</script> 

的要求$(document).ready()(或$(window).load())是確保DOM構造和元素,你要哪個綁定事件存在。如果沒有這些處理程序,瀏覽器會在遇到腳本時立即嘗試綁定事件,而不會等待元素存在或被創建,從而導致無法正常運行的事件綁定。

+0

我喜歡在頁面尾部加載腳本,使用$ (document).ready – hish

+0

@hish:無論以何種方式完成它或多或少都不相關,我個人的偏好是將JavaScript與未來的DOM重新排列隔離,並封裝在DOM就緒(或窗口加載)事件中,在事件中未來的客戶或開發人員想要將腳本從一個地方移到另一個地方。也就是說,無論如何,我傾向於從頭開始使用我的腳本,所以它們對於我的啓動用例是必需的。 –

+0

作爲性能,最好在文件末尾添加javescript。所以腳本不會阻止頁面加載。 – hish

0

把身體靠近標籤

Your Code 
</body> 
+0

這個代碼在和之間?不是在頭標籤? – maarcs

+0

是的,因爲你從DOM中選擇對象,所以當這段代碼執行時,你需要確保DOM元素存在。如果它們不存在,它將返回錯誤。 – hish

+0

抱歉的元素。 – hish

0

我會走這條路:

<head> 
    ... 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('.question, .answer').css("display", "none"); 
      $('.section').click(function() 
      { 
       var $others = $('.question:visible').not(this); 
       $others.next('.answer').hide(); 
       $others.slideToggle(500); 
       $(this).next('.question').slideToggle(500); 
      }); 
      $('.question').click(function() 
      { 
       $(this).next('.answer').slideToggle(500); 
      });​ 
     }); 
    </script> 
    ... 
</head> 

首先,你需要確保的jQuery的lib加載,那麼你可能會發現你的代碼是指在DOM爲對象,這樣你就可以訪問它們只有在頁面被加載(或者在它們被輸入到主體代碼之後)。只要有可能,我更願意將我的js代碼存儲在head部分中。