从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> 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。 在head标签中使用JS时，您需要使用以下方法确保在正确的时间调用JS：

$(function() {
});

要么

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

要么

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

所有这些方法在页面初始化期间的不同时间执行。 在head标签中使用JS后，您的浏览器需要先将所有JS下载到客户端，然后才能开始呈现HTML，这也将增加从访问站点到实际访问站点的时间。