如何使用仅在运行时已知的变量名称调用 JavaScript 函数

How do I call a JavaScript function with a variable name that is only known at runtime?

本文关键字：变量名 调用 JavaScript 函数 何使用 运行时      更新时间：2023-09-26

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

考虑以下示例 witch 不包括用于生成映像名称的 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） 的值调用函数。 但第一个例子是使用字符串"image1"调用函数，witch显然不是图像的路径名。

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

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

var images = {
  image1 : "cow.jpg",  
  image2 : "pig.jpg",
  image3 : "dog.jpg"
};
function nextBG(){
    imgIndex++
    currentIMG="image"+imgIndex;
    setBG(images[currentIMG]);
};

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

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;
};

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

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

然后你可以这样使用 JavaScript

for(var i=0; var i < images; i++)
{
    setBG(images[i]);
}
相关文章：