從PHP調用JS功能不起作用

Question

使用用戶在前一個問題中推薦的方法我僅使用一個文檔（index.php）來顯示不同的內容，而不是爲每個文檔創建一個文件。

這是代碼：

HTML

<a href="index.php">Home</a> 
<a href="?id_page=1">More info</a> 
<a href="?id_page=2">Contact Us</a> 


<div id="index">...index content...</div> 
<div id="more_info">...more info content...</div> 

JS

$(document).ready(function(){ 
    function more_info(){ 
     $('#index').hide(); 
     $('#more_info').show(); 
    } 
}); 

PHP

<?php 
    if (isset($_GET['id_page'])) { 
     $id = $_GET['id_page']; 
     if ($id == 1) { 
      ?> 
      <script> 
       more_info(); 
      </script> 
      <?php 
     } 
    } 
?> 

無法運作。但如果我改變<script> more_info(); </script>爲：

<script> 
    $(document).ready(function(){ 
     $('#index').hide(); 
     $('#quienes-somos').show(); 
    }); 
</script> 

它的工作原理。爲什麼是這樣？

Answer 1

它看起來像你遇到的問題是因爲你正在函數內定義你的more_info函數。這將把它從全局範圍中取出，除了文檔就緒函數的內部以外，它不會使該函數在任何地方都可訪問。

//more_info is now available globally 
function more_info(){ 
    $('#index').hide(); 
    $('#more_info').show(); 
} 

$(document).ready(function(){ 
    //document ready code here 
}); 

當您從PHP輸出JS函數時，應該使more_info執行。還有一點很好，因爲你沒有準備好執行這個函數，所以你需要確保html可以被JS修改。將所有JS放在結束標記之前通常是最佳做法。這將確保您的html加載儘可能快，並且您的JS將始終可以訪問您嘗試編輯的HTML。隨着JS頭標記，你需要確保你的JS是在正確的時間使用被稱爲：

$(function() { 
}); 

OR

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

OR

$(window).load(function() { 
}); 

所有這些方法在頁面初始化的不同時間執行。在頭部標記中使用JS，您的瀏覽器將需要將所有JS下載到客戶端，然後才能開始呈現HTML，這也將增加到訪問網站和實際查看網站之間的時間。