javascript - 从 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。使用 head 标记中的 JS，您需要确保在正确的时间调用您的 JS:

$(function() {
});

或

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

或

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

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