2

直到今天我才知道 JS 的位置会改变我的 html 页面的结果。我希望图像 src 在两个不同的 url 的“点击”之间切换。为什么这第一个代码像我想要的那样工作，而第二个却没有？？？第二个代码的源 html 为 var not_a_bad_word 生成一个空白字符串。

第一个代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>'Murica!'</title>
    </head>
    <body>
        <?php
        $dbhost = 'databasePlace';
        $dbname = 'mine';
        $dbuser = 'me';
        $dbpass = '*****';

        $link = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
        mysqli_select_db($link, $dbname);
        $name = $_GET["fname"];

        $query = sprintf(
            "SELECT image_url, Type
             FROM Pokemon c
             WHERE c.name = '%s'", 
             mysqli_real_escape_string($link, $name));

        $result = mysqli_fetch_assoc(mysqli_query($link, $query));

        echo '<img id="pokemon_card" onclick="changeImage()" height="450" 
                  width="330" src="' . $result['image_url'] . '"/>';

        mysqli_close($link);
        ?>
        <script>
            function changeImage() {
                element = document.getElementById('pokemon_card');
                var not_a_bad_word = "<?php echo $result['image_url']; ?>";

                if (element.src == "http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg") {
                    element.src = not_a_bad_word;
                }
                else {
                    element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg";
                }
            }
        </script>
    </body>
</html>

第二个代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>'Murica!</title>
        <script>
            function changeImage() {
                element = document.getElementById('pokemon_card');
                var not_a_bad_word = "<?php echo $result['image_url']; ?>";

                if (element.src == "http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg") {
                    element.src = not_a_bad_word;
                }
                else {
                    element.src="http://dmisasi.files.wordpress.com/2010/12/david-pokemon-card-back.jpg";
                }
            }
        </script>
    </head>
    <body>
        <?php
        $dbhost = 'databasePlace';
        $dbname = 'mine';
        $dbuser = 'me';
        $dbpass = '*****';

        $link = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
        mysqli_select_db($link, $dbname);
        $name = $_GET["fname"];

        $query = sprintf(
            "SELECT image_url, Type
             FROM Pokemon c
             WHERE c.name = '%s'", 
             mysqli_real_escape_string($link, $name));

        $result = mysqli_fetch_assoc(mysqli_query($link, $query));

        echo '<img id="pokemon_card" onclick="changeImage()" height="450" 
                  width="330" src="' . $result['image_url'] . '"/>';

        mysqli_close($link);
        ?>
    </body>
</html>
4

2 回答 2

5

在您的第一个示例中，创建变量的 PHP 代码在变量被回显之前$result['image_url']运行。

如果您查看生成空白的第二个示例，$result['image_url']则实际上仅在它被回显后才定义。

于 2012-11-20T08:55:28.023 回答
1

那是因为在第二个示例中插入 JS 代码时，元素“pokemon_card”还没有出现。因此，选择器没有定义，不能在代码中使用。始终建议将使用 DOM 元素的 js 代码放在文档末尾。

于 2012-11-20T08:52:28.287 回答