Jquery/ Javascript 從 PHP scope 問題獲取信息？

Question

我試圖從我們的數據庫中獲取一些信息，然后在 javascript/JQuery 中使用它，我想我可能對編碼的 scope 做錯了什么。

這是我的 phtml 頁面上的當前代碼段（magento）

<script type="text/javascript">
<?php
echo 'var $image-paths = new Array();';
for ($i = 0; $i < count ($_child_products); $i++)
{
    echo '$image-paths[';
    echo $i;
    echo '] = ';
    echo $this->helper('catalog/image')->init($_child_products[$i], 'image');
    echo ';';
}
?>
document.getElementById('main-image').href = $image-paths[1];
</script>

底部的 getElementById 只是為了測試它是否真的抓住了那個圖像路徑。 到目前為止，php 的東西正在工作並回顯正確的鏈接。 然而，僅僅回應它們是不夠的； 它實際上是否將其注冊到 javascript 代碼中？

這是我的源代碼在我的服務器上的樣子：

<script type="text/javascript">
var $image-paths = new Array();
$image-paths[0] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5f  b8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg;
$image-paths[1] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64566-a.jpg;
$image-paths[2] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-64568-a.jpg;
$image-paths[3] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/feeds/MrsMeyers/MRM-D43114-a.jpg;
document.getElementById('main-image').href = $image-paths[1];
</script>

但是圖像鏈接不會更改為圖像路徑[1]。 有任何想法嗎？

提前致謝！

Answer 1

$image-paths[0] = http://staging.greencupboards.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5f  b8d27136e95/feeds/MrsMeyers/MRM-64565-a.jpg;
                  ^-- no quote here, or at the end of the string

您正在生產無效的 javascript。 彈出您的 javascript 控制台（chrome/firefox 中的 shift-ctrl-J），您會看到錯誤。

動態生成 javascript 是有問題的。 任何時候你從 PHP 變量/函數中插入一些東西，你應該通過 json_encode() 運行它，這保證你得到有效的 javascript：

echo json_encode($this->helper('catalog/image')->init($_child_products[$i], 'image'));

或者更好的是，將代碼更改為：

$links = array();
for ($i = 0; $i < count ($_child_products); $i++)
    $links[] = $this->helper('catalog/image')->init($_child_products[$i], 'image');
}

echo '$image-paths = ', json_encode($links);

Answer 2

<script type="text/javascript">
<?php
echo 'var $image_paths = new Array();';
for ($i = 0; $i < count ($_child_products); $i++)
{
    echo '$image_paths[';
    echo $i;
    echo '] = "'; // Here the starting of quotes.
    echo $this->helper('catalog/image')->init($_child_products[$i], 'image');
    echo '";'; // Here the ending of quotes.
}
?>
document.getElementById('main-image').href = $image_paths[1];
</script>

現在應該可以了。 希望能幫助到你。