Question

我想知道如何在JavaScript中更改4个图像。我来自Python，我想找一个简短的解决方案。我正在使用将在Python中使用的代码，但我想要一个具有相同原理的JavaScript代码。制作和阵列，当单击按钮时，如果它在一个按钮上，则显示阵列中的下一个图像。

这是迄今为止的结构：

<script>   
    var images = ["i1.gif","i2.gif","i3.gif","i4.gif"]
    position=0;

    function changeImage() {
        for position in range(4):
            if position==4:
                position=0
            print(images[position])
    }
</script>

这是单击按钮时调用的命令，但我不确定是否触发它。任何有关解释的帮助将不胜感激，谢谢！

Answer 1

以下是源自您的JavaScript代码：

var images = [ "i1.gif", "i2.gif", "i3.gif", "i4.gif" ];
var position = 0;

function changeImage() {
    position = position + 1;  // or position++; or position += 1;

    // Array indexes are counted starting from 0.
    // That means 'position' can only go up to 3
    // in a length 4 array.
    if (position >= images.length) {
        position = 0;
    }

    // This doesn't actually display the images,
    // it just prints out their names.
    console.log(images[position]);
}

我删除了for循环，因为它将从头到尾运行，并且只会返回数组的最后一个图像。另外，正如我对代码发表评论时，print（或者在这种情况下，console.log）实际上不会显示图片，它只会返回其名称（"i1.gif"，{{ 1}}等。）

Answer 2

首先，据我所知，在JavaScript中没有Python的范围。相反，您可以迭代图像数组。这个想法与

相同

frmResendPassword

事情是......这在JavaScript中比一点点更麻烦。

你知道，在JavaScript数组中实际上是对象。但JavaScript对象与Python对象不同。 JavaScript对象实际上与Python 词典非常相似。它们存储键值对关联。数组只是一个键为for x in array: do_something(x)的对象。它还有一些神奇的字段，以便JavaScript VM知道如何有效地对待它。

现在，为什么这很重要？好吧，问题是，在一个非常糟糕的（在我看来）设计决策中，而不是JavaScript中的0, 1, 2...运算符与Python中的运算符相同，它实际上迭代了对象键，而不是对象值！

所以你实际上需要这样做来迭代一个对象的值：

for ... in

因此，您尝试做的完整解决方案将是：

for(var x in array) {
  do_something(array[x]);
}

现在，这显然只会打印每张图片的名称，但是通过将var images = [ "i1.gif", "i2.gif", "i3.gif", "i4.gif" ]; var position = 0; function changeImage() { for(var position in images) { console.log(images[position]); } }替换为任何其他功能，您可以使用它们迭代图像。

整个console.log循环使用起来有点麻烦，因此ES6（JavaScript的最新稳定版本）添加了for ... in循环，其工作方式与Python的for ... of完全相同。例如，您可以将for ... in函数重写为：

changeImage()

但是你似乎试图在浏览器和getting ES6 to work consistently in a browser requires compiling中完成这项工作，所以我现在坚持使用function changeImage() { for(const img of images) { console.log(img); } }循环，即使它们更难以使用。

祝你好运！

编辑：在完成回答之后，我记得另外一件事：

在JavaScript中，for ... in循环无法保证以按键顺序遍历数组键。因此，如果按特定顺序处理图像对您很重要，则应使用：

for ... in

这使用Array.prototype.forEach()方法，保证以数字顺序遍历数组键。

使用按钮更改图像

2 个答案: