我已经在网上搜索了几个小时,在整个“外部 js 文件”-jungle 中找不到答案。我希望你们能帮忙!
简而言之:我的外部 javascript 文件似乎没有得到我在 main.php 文件中定义的变量。
在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>
在我的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]; } }
结果: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 函数在鼠标悬停时不起作用。但是,我尝试使用 eg 输出变量,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] 解决。即使我像下面这样对其进行硬编码,第二个 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>
对不起,这里的话题很长。我希望你能跟随!我正在努力学习!