0

私は数時間ネットを検索してきましたが、「外部jsファイル」全体（ジャングル）で答えを見つけることができません。私はあなたたちが助けることができることを願っています！

つまり、外部のjavascriptファイルは、main.phpファイルで定義した変数を取得していないようです。

  1. main.phpで、php変数を定義し、それらをjavascript変数に「変換」します

    <head>...
<script type="text/javascript">
var phpmain_img = <?php echo json_encode($main_img); ?>;
var phpvar1_large = <?php echo json_encode($var1_large); ?>;
var phpvar2_large = <?php echo json_encode($var2_large); ?>;
var phpvar3_large = <?php echo json_encode($var3_large); ?>;
var phpvar4_large = <?php echo json_encode($var4_large); ?>;
</script>
...
<script language="javascript" type="text/javascript" src="/wshop/ext.js"></script>
</head>

  2. ext.jsファイルで、これらの変数を処理したいと思います。ext.jsファイルで、メインのPHPで使用される関数swapImage（）を定義しました。

            var imgArray = new Array(
        phpmain_img,
        phpvar1_large,
        phpvar2_large,
        phpvar3_large
        );

    function swapImage(imgID) {
        var theImage = document.getElementById('theImage');
        var newImg;
        newImg = imgArray[imgID];
        theImage.src = newImg;
    }

    function preloadImages() {      
        for(var i = 0; i < imgArray.length; i++) {
            var tmpImg = new Image;
            tmpImg.src = imgArray[i];
        }
    }

  3. 結果： main.phpのswapImage（）...が機能しない

    <div id="image">
    <img id="theImage" src="<?=$main_img; ?>" alt="" />
</div>

<div id="thumbs">
<?php

        echo "<img src=\"<$main_img_small\" alt=\"\" onmouseover=\"swapImage(0);\">";
        echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"swapImage(1);\">";
        echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"swapImage(2);\">";
        echo "<img src=\"$var3_small\" alt=\"\" onmouseover=\"swapImage(3);\">";

        ?>


    <br />
</div>

どんな助けでも大歓迎です！

アップデート：

特定のエラーは発生しません。swapImage関数はマウスオーバーで機能しません。しかし、例えばで変数を出力しようとしましたdocument.write(phpimg_main)が、変数の受け渡しに何か問題があると思わせるようなものは何も表示されません...

これがソースコードブラウザの出力です

<html>
    <head>
        <link href="../demo.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            ....
</style>

        <script type="text/javascript">
        var phpmain_img = {"0":"http:\/\/path\/to\/main\/image.jpg"};
        var phpvar1_large = {"0":"http:\/\/path\/to\/image1.jpg"};
        var phpvar2_large = {"0":"http:\/\/path\/to\/image2.jpg"};
        var phpvar3_large = null;
        var phpvar4_large = null;
        </script>   

        <script language="javascript" type="text/javascript" src="/wshop/ext.js"></script>
</head>




<body onload="preloadImages()">

    <div id="image">
        <img id="theImage" src="http://path-to-main-image.jpg" alt="" />
    </div>

    <div id="thumbs">
    <img src="http://path-to-main-image.jpg" alt="" onmouseover="swapImage(0);"><img src="http://path-to-image1.jpg" alt="" onmouseover="swapImage(1);"><img src="http://path-to-image2.jpg" alt="" onmouseover="swapImage(2);">

        <br />
    </div>



</body>

`

更新2：

ご意見・ご回答ありがとうございます！もちろん、その通りです。オブジェクトではなく文字列が必要なので、エンコーディングは素晴らしいヒントです。

ただし、この問題は[0]ではまだ解決されていません。以下のようにハードコーディングしても、2番目のjavascriptブロック（以前は外部jsファイルとしてアウトソーシングしようとしました）は、最初のjavascriptブロックで定義された変数を取得しません。

<script type="text/javascript">
        var phpmain_img = "http://www.abc.de/path-img_main.jpg";
        var phpvar1_large = "http://www.abc.de/path-img1.jpg";
        var phpvar2_large = "http://www.abc.de/path-img2.jpg";
        var phpvar3_large = "http://www.abc.de/path-img3.jpg";
        var phpvar4_large = "http://www.abc.de/path-img4.jpg";
        </script>

<script language="javascript" type="text/javascript">


                   var imgArray = new Array(
                phpmain_img,
                phpvar1_large,
                phpvar2_large,
                phpvar3_large,
                phpvar4_large
            );



            function swapImage(imgID) {
                var theImage = document.getElementById('theImage');
                var newImg;
                newImg = imgArray[imgID];
                theImage.src = newImg;
            }

            function preloadImages() {      
                for(var i = 0; i < imgArray.length; i++) {
                    var tmpImg = new Image;
                    tmpImg.src = imgArray[i];
                }
            }



            </script>

ブラウザのソースビューの出力：

<script type="text/javascript">
        var phpmain_img = "http://www.abc.de/path-img_main.jpg";
        var phpvar1_large = "http://www.abc.de/path-img1.jpg";
        var phpvar2_large = "http://www.abc.de/path-img2.jpg";
        var phpvar3_large = "http://www.abc.de/path-img3.jpg";
        var phpvar4_large = "http://www.abc.de/path-img4.jpg";
        </script>

        <script language="javascript" type="text/javascript"> //this i actually wanted to outsource into an external js-file

        var imgArray = new Array(
            phpmain_img,
            phpvar1_large,
            phpvar2_large,
            phpvar3_large,
            phpvar4_large
        );



        function swapImage(imgID) {
            var theImage = document.getElementById('theImage');
            var newImg;
            newImg = imgArray[imgID];
            theImage.src = newImg;
        }

        function preloadImages() {      
            for(var i = 0; i < imgArray.length; i++) {
                var tmpImg = new Image;
                tmpImg.src = imgArray[i];
            }
        }



        </script>

申し訳ありませんが、ここで長いトピックについて。フォローしていただければ幸いです。私は学ぶために最善を尽くしています！

4

1 に答える 1