3

对于这个问题，我有一段 PHP 代码在目录中查找并返回文件列表。然后我遍历数组并使用 echo 将每个文件名存储为 JavaScript 变量

考虑以下示例，女巫不包括用于生成图像名称的 PHP：

//result of PHP
image1="cow.jpg"  
image2="pig.jpg"
image3="dog.jpg"

imgIndex=0 //global variable that will be incremented

function setBG(image) {
    someElement.style.backgroundImage= "url(/images/" + image + ")"
};

function nextBG(){
    imgIndex++
    currentIMG="image"+imgIndex;
    setBG(currentIMG);
};

当调用函数nextBG()将不起作用。但这将：

function nextBG(){
    setBG(image1);
};

我相信它不起作用的原因是因为第二个示例是使用定义的变量（cow.jpg）的值调用函数。但是第一个示例是使用 string 调用函数"image1"，witch 显然不是图像的路径名。

有没有办法让我使用变量调用函数image1，然后image2等等image3，而不会被解释为只是一个字符串？

4

3 回答 3

1

最简单的解决方案是将所有图像存储在一个数组中：

var bgImages = [
    // All can be got with a call to encode your PHP array as JSON.
    "cow.jpg",
    "horse.jpg",
    "dog.jpg",
    "pig.jpg"
    ],
    imageIndex = 0,
    maxLength = bgImages.length - 1;

function setBG(image) {
    someElement.style.backgroundImage= "url(/images/" + image + ")"
};

function nextBG(){
    var currentIMG = bgImages[imageIndex];
    setBG(currentIMG);
    imageIndex = imageIndex > maxLength ? 0 : imageIndex + 1;
};
于 2012-08-14T03:18:35.957 回答
1

使您的变量成为对象的成员。然后您可以使用 [] 使用字符串访问对象成员：

var images = {
  image1 : "cow.jpg",  
  image2 : "pig.jpg",
  image3 : "dog.jpg"
};

function nextBG(){
    imgIndex++
    currentIMG="image"+imgIndex;
    setBG(images[currentIMG]);
};
于 2012-08-14T03:19:02.217 回答
0

那是因为 currentIMG 是一个字符串，而不是一个变量。这就是你想要做的。你有你的数组 $images，它只是图像名称。在您的 HTML 中，您执行此操作

var images = <?php echo json_encode($images); ?>;

然后你可以像这样使用JavaScript

for(var i=0; var i < images; i++)
{
    setBG(images[i]);
}
于 2012-08-14T03:19:39.313 回答